Grid loses (visible) selection after saving the record and after committing

Question

I have a simple case when I received a grid with attached storage.

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

When I select a record and click edit -> editing, a selection occurs (looks lost), if you call grid.geSelectionModel().getSelection() , you will see that the record is still selected. It just doesn't show it.

You cannot select it again, first you need to select another record and select a record.

Secondly, when you select a record, press the commit button, the value will be fixed, but the choice will “appear” again as lost.

This is mistake? How can i fix this? I want it to remain visible!

Here is the fiddle

and here is a sample code: (I am using 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 this on the sencha forum. Mitchell Simoens told me what was fixed in Ext 4.1.2. It’s a pity that this option is “Subscriber support only.”

UPDATE:

I am looking for a problem to try to fix it. I believe the problem is in the Ext.view.Table class in the onUpdate method, more accurate in 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 nice to just leave this piece of code? I commented on this, it looks like it is working now, but will it not break some other functions? http://jsfiddle.net/Vandeplas/YZqch/10/

Answer 1

I think this is a bug, perhaps as part of a grid update to show dirty bits.
I went around this ugly 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 thing can be done for commit()

Hope this helps.