ExtJS: Added grid rows wont de-highlight

When adding a rows to a grid, and then clicking on it, it gets selected (and highlighted). Then, clicking elsewhere but the new row remains highlighted (so now there are to highlighted rows).

Please, does anyone know what the problem could be? How to make it behave normally, i.e. clicking a row deselects (de-highlights) the other one?

After I reload the page (so the new row is not new anymore), everything works as expected.

Edit: Here's the code for adding rows:

var rec = new store.recordType({
    test: 'test'
});
store.add(rec);

Edit 2: The problem seems to be listful: true. If false, it works! But I need it to be true so I'm looking at this further... It looks like as if the IDs went somehow wrong... If the ID would change (I first create the record and then the server returns proper ID, that would also confuse the row selecto开发者_运维知识库r, no?)

(Note, correct as ExtJS 3.3.1)

First of all, this is my quick and dirty hack. Coincidentally I have my CheckboxSelectionModel extended in my system:-

Kore.ux.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {

    clearSelections : function(fast){
        if(this.isLocked()){
            return;
        }
        if(fast !== true){
            var ds = this.grid.store,
                s = this.selections;
            s.each(function(r){
                //Hack, ds.indexOfId(r.id) is not correct.
                //Inherited problem from Store.reader.realize function
                this.deselectRow(ds.indexOf(r));
                //this.deselectRow(ds.indexOfId(r.id));
            }, this);
            s.clear();
        }else{
            this.selections.clear();
        }
        this.last = false;
    }
});

And this is the place where the clearSelections fails. They try to deselect rows by using ds.indexOfId(r.id) and it will returns -1 because we do not have the index defined remapped.

And this is why we can't find the id:-

http://imageshack.us/photo/my-images/864/ssstore.gif/

Note that the first item in the image is not properly "remapped". This is because we have a problem in the "reMap" function in our Ext.data.Store, read as follow:-

// remap record ids in MixedCollection after records have been realized.  @see Store#onCreateRecords, @see DataReader#realize
reMap : function(record) {
    if (Ext.isArray(record)) {
        for (var i = 0, len = record.length; i < len; i++) {
            this.reMap(record[i]);
        }
    } else {
        delete this.data.map[record._phid];
        this.data.map[record.id] = record;
        var index = this.data.keys.indexOf(record._phid);
        this.data.keys.splice(index, 1, record.id);
        delete record._phid;
    }
}

Apparently, this method fails to get fired (or buggy). Traced further up, this method is called by Ext.data.Store.onCreateRecords

....
this.reader.realize(rs, data);
this.reMap(rs);
....

It does look fine on the first look, but when I trace rs and data, these data magically set to undefined after this.reader.realize function, and hence reMap could not map the phantom record back to the normal record.

I don't know what is wrong with this function, and I don't know how should I overwrite this function in my JsonReader. If any of you happen to be free, do help us trace up further for the culprit that causes this problem

Cheers

Lionel

Looks like to have multi select enabled for you grid. You can configure the selection model of the grid by using the Ext.grid.RowSelectionModel.

Set your selection model to single select by configuring the sm (selection model) in grid panel as show below:

sm: new Ext.grid.RowSelectionModel({singleSelect:true})

Update:

Try reloading the grid using the load method or loadData method of the grid's store. Are you updating the grid on the client side? then maybe you can use loadData method. If you are using to get data from remote.. you can use load method. I use load method to update my grid with new records (after some user actions like add,refresh etc). Or you could simply reload as follows:

grid.getStore().reload();