Grid loses (visible) selection after store-record edit and after comit

[VDP]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• Chrome 22

Description:

• I have a simple case where I got a grid with an attached store.
  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 an 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.

Steps to reproduce the problem:
CASE A:

• select row
• click the set name button

CASE B:

• select other row
• select edited row again
• click commit button

The result that was expected:

• selection should be kept

The result that occurs instead:

• selection lost

Test Case:

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [{
            'name': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"
        }, {
            'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234"
        }, {
            'name': 'Homer',
            "email": "home@simpsons.com",
            "phone": "555-222-1244"
        }, {
            'name': 'Marge',
            "email": "marge@simpsons.com",
            "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');
            }
        }]
    }]
});​

HELPFUL INFORMATION




Screenshot or Video:

• attached

See this URL for live test case: Working fiddle: http://jsfiddle.net/Vandeplas/YZqch/5/


Temporary dirty fix:

• http://jsfiddle.net/Vandeplas/YZqch/7/

Operating System:

• Win7

[mitchellsimoens]

Tested on 4.1.1 and selection is lost. Tested on 4.1.2 and selection remains through all steps so looks like this bug was fixed.

[VDP]

How is it solved? What's changed. We only have a licence, no premium support so no access to 4.1.2 (GA). If I knew what was changed I could easily make an override that fixes the issue...

The issue is in the onUpdate method of the Ext.view.Table class somewhere 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);
        }
    }
}

[FoxMulder900]

Here is my solution to this until 4.1.2 is released.

I changed the code that VDP posted (from view/Table.js) to the following:

                    
if (oldRowDom.mergeAttributes) {
    var tmpCls = oldRowDom.className;
    oldRowDom.mergeAttributes(newRow, true);
} else {
    var tmpCls = oldRowDom.getAttribute('class');
    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);
        }
    }
}
if(tmpCls){
    oldRow.addCls(tmpCls);
}