PDA

View Full Version : Grid cell editing focus not working correctly on tab key



jason rogers
3 Oct 2013, 7:23 AM
Hi All

I have Ext.grid.Panel with some of the columns who have an editor attached to them.

Everything works fine when I test in Chrome, but when I text this in IE8 the changing of cells doesn't work when using the tab key for the last column of editable cells.

In the same grid I have a one editor as a datefield, one as a timefield and the last as a text field.

When debugging through the extjs code, I can see both on the screen a stepping through the code that the editor is triggered correctly and the cell becomes editable, but then it loses focus automatically and the editor disappears.

I also tried setting the cell to edit through the console and I get the same behaviour (switches to edit and back).



Any Ideas?

Some Code :)


Ext.define('TEST.view.dip.List', { extend: 'Ext.grid.Panel',
alias: 'widget.dip_list',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*'
],


store: 'dip.Tanks',
disableSelection: true,
ignoreBorderManagement: true,


viewConfig: {
markDirty: false
},


features: [{
id: 'locationGroup',
ftype: 'grouping',
hideGroupedHeader: true,
enableGroupingMenu: false,
collapsible: false,


groupHeaderTpl: Ext.create('Ext.XTemplate',

'<span class=ux-header-key>{name}</span> {name:this.getLocationName}',
{
getLocationName: function(shipTo) {
var
store = Ext.getStore('dip.Locations'),
idx = store.find('bpNo', shipTo),
loc, locName;


loc = store.getAt(idx);


if (loc) {
return loc.data.longName;
}
}
}
)
}],




initComponent: function() {
var me = this;


me.addEvents(['validateedit']);


me.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1,
listeners: {
beforeedit: {
fn: function(editor, e, eOpts){
if (e.field === 'dipReading'){
return true;
}
if (!e.record.isEditable){
return false;
}
}
},


validateedit: {
fn: function(editor, e, eOpts){
me.fireEvent('validateedit', editor, e, eOpts);


}
},
scope: me
}
});


Ext.apply(this,{
plugins: [this.cellEditing],
columns: {



defaults: {
sortable: false,
draggable: false,
hideable: false,
menuDisabled: true
},
items: [{
xtype: 'gridcolumn',
dataIndex: 'dipDate',
width: 130,

isEditable: true,
locales: {
text: 'dip.column.dipDate',
tooltip: 'dip.column.dipDate'
},

renderer: function(v, meta, rec){
if (rec.isEditable){
meta.tdCls = 'ux-grid-cell-editable';
if (rec.errors.getByField('dipDate').length > 0){
meta.classes.push('ux-grid-cell-invalid');


}
return Ext.util.Format.date(v);
}
},
editor: {
xtype: 'datefield',
width: 130 - TEST.Config.LAYOUT.GRID_EDIT_CELL_MARGIN * 2,
format: Ext.Date.defaultFormat,
maxValue: Ext.util.Format.date(new Date()),
maxText: TEST.LocaleMgr.get('dip.validation.maxDateTime')
}
},{
xtype: 'gridcolumn',
dataIndex: 'dipTime',

width: 120,

isEditable: true,
locales: {
text: 'dip.column.dipTime',
tooltip: 'dip.column.dipTime'
},

renderer: function(v, meta, rec){
if (rec.isEditable){
meta.tdCls = 'ux-grid-cell-editable';
if (rec.errors.getByField('dipTime').length > 0){
meta.tdCls += ' ux-grid-cell-invalid';
}
return Ext.util.Format.date(v, Ext.form.field.Time.prototype.format);
}
},
editor: {
xtype: 'timefield',
width: 120 - TEST.Config.LAYOUT.GRID_EDIT_CELL_MARGIN * 2,
format: Ext.form.field.Time.prototype.format,
increment: 5
}
},{
xtype: 'gridcolumn',
dataIndex: 'tankId',
width: 82,
locales: {
text: 'dip.column.tankId',
tooltip: 'dip.column.tankId'
}
},{
xtype: 'gridcolumn',
dataIndex: 'materialId',
width: 100,
locales: {
text: 'dip.column.materialId',
tooltip: 'dip.column.materialId'
}
},{
xtype: 'gridcolumn',
dataIndex: 'materialText',
locales: {
text: 'dip.column.materialText',
tooltip: 'dip.column.materialText'
},
flex: 1
},{
xtype: 'numbercolumn',
dataIndex: 'tankCapacity',
align: 'right',
width: 100,
format: '0,0',
locales: {
text: 'dip.column.tankCapacity',
tooltip: 'dip.column.tankCapacity'
}
},{
xtype: 'gridcolumn',
dataIndex: 'dipReading',
width: 150,

isEditable: true,
emptyText: 'No reading',
locales: {
text: 'dip.column.dipReading',
tooltip: 'dip.column.dipReading'
},
align: 'right',
renderer: function(v, meta, rec) {
meta.tdCls = 'ux-grid-cell-editable';
if (rec.errors.getByField('dipReading').length > 0){
meta.tdCls += ' ux-grid-cell-invalid';
}


if (Ext.String.trim(v).length === 0){
return 'No reading';
}
else{
return v;
}






},
editor: {
xtype: 'textfield',
width: 150 - TEST.Config.LAYOUT.GRID_EDIT_CELL_MARGIN * 2,
allowBlank: true,
selectOnFocus: true


}
},{
xtype: 'gridcolumn',
dataIndex: 'tankUom',
width: 70,
locales: {
text: 'dip.column.tankUomText',
tooltip: 'dip.column.tankUomText'
}
}]}
});


me.callParent();


me.groupingFeature = this.view.getFeature('locationGroup');


}


});

ettavolt
6 Oct 2013, 9:35 PM
Problems with focus are not so simple to trace, because when you switch to debugger, browser window loses focus.
Once I have similar problem (but not exact) - it was caused by refresh after autosync.