Question

I have a simple case where I got a grid with an attached store.

There are 2 buttons. One with a handler that modifies the selected record. One with a handler that commits the selected record.

When I select a record and push edit -> editing takes place selection (looks lost) if you call grid.geSelectionModel().getSelection() you will see that the record is still selected. It just doesn’t show it that way.

You can’t select it again, you first have to select another record, and select the record back.

Secondly when you select a record click on the commit button, the value is committed, but the selection ‘appears’ again as lost.

Is this a bug? How can I fix this? I want it to keep the selection visible!

Here is a fiddle

and here is the sample code: (I use Ext 4.1.1)

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [{
            'name': 'Lisa',
            "email": "[e-mail]",
            "phone": "555-111-1224"
        }, {
            'name': 'Bart',
            "email": "[e-mail]",
            "phone": "555-222-1234"
        }, {
            'name': 'Homer',
            "email": "[e-mail]",
            "phone": "555-222-1244"
        }, {
            'name': 'Marge',
            "email": "[e-mail]",
            "phone": "555-222-1254"
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.container.Container', {
    layout: 'fit',
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'grid',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 200,
        buttons: [{
            text: 'commit selection',
            handler: function(){
                this.up('grid').getSelectionModel().getSelection()[0].commit();
            }
        },{
            text: 'set selection name to maggy',
            handler: function(){
                this.up('grid').getSelectionModel().getSelection()[0].set('name', 'Maggy');
            }
        }]
    }]
});​

UPDATE:

I reported it on the sencha forum. Mitchel Simoens told me it’s fixed in Ext 4.1.2. Too bad it’s a ‘Support subscriber only’ version..

UPDATE:

I’m locating the issue to try and fix it. I believe the issue is located in the Ext.view.Table class in onUpdate method, more precise around this piece of code:

if (oldRowDom.mergeAttributes) {
    oldRowDom.mergeAttributes(newRow, true);
} else {
    newAttrs = newRow.attributes;
    attLen = newAttrs.length;
    for (i = 0; i < attLen; i++) {
        attName = newAttrs[i].name;
        if (attName !== 'id') {
           oldRowDom.setAttribute(attName, newAttrs[i].value);
        }
    }
}

Is it a bad idea to just leave this piece of code out? I commented it out it seems like it’s working now, but won’t it break some other functionality? http://jsfiddle.net/Vandeplas/YZqch/10/

Answer 1

I think its a bug, maybe as part of refreshing the grid to show the dirty bits.
I circumvented this in an ugly way, in your revised fiddle:

{
    text: 'set selection name to maggy',
    handler: function(){
        var sel = this.up('grid').getSelectionModel();
        var rec = sel.getSelection()[0];
        rec.set('name', 'Maggy');
        sel.deselectAll();
        sel.select(rec.index);
    }
}

I did this for .set(), but the same can be done for commit()

Hope this helps somewhat.