Adding a record to the store

I have a editable grid, store and a button. The button has a handler that is supposed to copy the selected record and add the copy to the store:

var a = gri开发者_开发技巧dPanel.getSelectionModel().getSelectedCell();

    var rec = store.getAt(a[0]).copy();
    store.addSorted(rec);
    alert (store.getAt(1).get('date'));

But the store and the grid are not updated. The alert has an error - cannot call method of undefined.

What is the problem here?

The issue probably is that the copied record has the same id thus when you insert it in the store another record with the same id is already present.

If you generate and apply a new id to the copied record before adding it to the store it should work. The following code generates a new ID in the record passed as argument. Check the documentation of Ext.data.Record.copy.

Ext.data.Record.id(rec);

Few things that most JavaScript developers should do:

1. Use firebug, if you turn on break on all errors it would probably show you that store.get(1) is returning undefing and causing an error when you try to call a function on an undefined.

2. Now that you have firebug use console.log() statements over window.alert(). With console.log's you can actually see the an inspect it, it is also good for asynchronous stuff and mouse events.

As for your problem: Calling a record.copy() and then inserting it into the store will cause problems if you don't give it an id. If you had firebug and looked through the code you would stumble upon this:

if(this.containsKey(key)){
 this.suspendEvents();
 this.removeKey(key);
 this.resumeEvents();
 }

To generate a record with a unique key you can do something like this :

var rec = store.getAt(a[0]).copy();
var id = Ext.data.Record.id(id);
rec.id = id;

The code seems messy but there aren't many nice ways of doing it. If it were me I would override the copy function to take a boolean to force the record's id to be auto generated.