PDA

View Full Version : [FIXED] extjs 4.2.0: Tab key not working on grid cell edit with group feature



jimmylu98
5 Apr 2013, 10:48 AM
In 4.2.0, if a grid cell edit with group feature, hit 'Tab' key will not go to next editable cell. Without group feature, 'Tab' key is working as expected. Tested with FF and Chrome. See following simple test code.

In Extjs 3.4.x, 'Tab' key is also working as expected.





Ext.onReady(function() {

Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});



var grid = Ext.create('Ext.grid.Panel', {
border: false,
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Name', dataIndex : 'name', editor: { allowBlank: false } },
{ header : 'Email', dataIndex : 'email', flex : 1, editor: { allowBlank: false } },
{ header : 'Change', dataIndex : 'change', sortable: false, groupable: false, editor: { xtype: 'numberfield', allowBlank: false } }
],
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
}) ],
features: [Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
})],
renderTo: Ext.getBody()
});


});

slemmon
5 Apr 2013, 12:39 PM
Thanks for the report! I have opened a bug in our bug tracker.

Animal
12 Apr 2013, 7:54 AM
As a workaround, try



Ext.override(Ext.grid.feature.GroupStore, {
indexOf: function(record, viewOnly) {
var me = this,
groups,
groupCount,
i,
group,
groupIndex,
result = 0;

if (record && !me.isInCollapsedGroup(record)) {
groups = me.store.getGroups();
groupCount = groups.length;
for (i = 0; i < groupCount; i++) {

// group contains eg
// { children: [childRec0, childRec1...], name: <group field value for group> }
group = groups[i];
if (group.name === this.store.getGroupString(record)) {
groupIndex = Ext.Array.indexOf(group.children, record);
return result + groupIndex;
}

result += (viewOnly && this.isCollapsed(group.name)) ? 1 : group.children.length;
}
}
return -1;
}
});

jimmylu98
12 Apr 2013, 8:19 AM
Thanks. The patch works.