PDA

View Full Version : [OPEN] "beforeedit" event fired of next cell fired before "edit" event of current cell



mf913
25 Sep 2013, 9:19 AM
4.2.2 (pre-release) has some fix we need. However, it introduced a different behavior from 4.2.1 and previous versions. The attached code will demonstrate the difference.

4.2.1 or earlier
When you enter a cell, it triggers "beforeedit" event. You make some changes and you "tab" to next cell. This triggers "edit" event from 1st cell, then "beforeedit" of the next cell.

4.2.2
The behavior has changed. When we "tab" to next cell, it first triggers "beforeedit" of the next cell, then the "edit" event of the first cell. The sequence of events has changed.

https://fiddle.sencha.com/#fiddle/lu



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['num1', 'num2', 'num3'],
data:{'items':[
{"num1":1, "num2":2, "num3":3},
{"num1":1, "num2":2, "num3":3},
{"num1":1, "num2":2, "num3":3}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Num1', dataIndex: 'num1',
editor : {
xtype : 'numberfield',
selectOnFocus: true,
minValue : 0.01,
decimalPrecision : 2,
enforceMaxLength : true,
allowBlank : false,
blankText : 'Num1 cannot be blank.',
minText : 'Num1 must be greater than 0.',
hideTrigger : true,
keyNavEnabled : false,
mouseWheelEnabled : false
}
},
{header: 'Num2', dataIndex: 'num2',
editor : {
xtype : 'numberfield',
selectOnFocus: true,
minValue : 0.01,
decimalPrecision : 2,
enforceMaxLength : true,
allowBlank : false,
blankText : 'Num2 cannot be blank.',
minText : 'Num2 must be greater than 0.',
hideTrigger : true,
keyNavEnabled : false,
mouseWheelEnabled : false
}
},
{header: 'Num3', dataIndex: 'num3',
editor : {
xtype : 'numberfield',
selectOnFocus: true,
minValue : 0.01,
decimalPrecision : 2,
enforceMaxLength : true,
allowBlank : false,
blankText : 'Num3 cannot be blank.',
minText : 'Num3 must be greater than 0.',
hideTrigger : true,
keyNavEnabled : false,
mouseWheelEnabled : false
}
} ],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
'beforeedit': function (e, editor) {
console.log('beforeedit ' + editor.field);
},
'edit': function (editor, e, opts) {
console.log('edit ' + e.field);
}
}
});


I compared cellediting.js between 4.2.1 and 4.2.2.
In the startEdit function of 4.2.2, currently the codes are



// If there is an editor for this column,
// allow vetoing, or setting a new editor *before* we call getEditor
isFieldEditable = (columnHeader && columnHeader.getEditor(record)) && !(me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel);


if (isFieldEditable) {
ed = me.getEditor(record, columnHeader);
isEditorEditing = ed.editing;
}


// Complete the edit now, before getting the editor's target cell DOM element.
// Completing the edit hides the editor, causes a row update and sets up a delayed focus on the row.
// Also allows any post-edit events to take effect before continuing
me.completeEdit();


if (!isFieldEditable) {
return false;
}




if i do "me.completeEdit()" first, it would solve the problem i encounter. but i cannot confirm if this is the correct solution or not.


// Complete the edit now, before getting the editor's target cell DOM element.
// Completing the edit hides the editor, causes a row update and sets up a delayed focus on the row.
// Also allows any post-edit events to take effect before continuing
me.completeEdit();


// If there is an editor for this column,
// allow vetoing, or setting a new editor *before* we call getEditor
isFieldEditable = (columnHeader && columnHeader.getEditor(record)) && !(me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel);


if (isFieldEditable) {
ed = me.getEditor(record, columnHeader);
isEditorEditing = ed.editing;
}


if (!isFieldEditable) {
return false;
}

Gary Schlosberg
25 Sep 2013, 10:42 AM
Thanks for the report! I have opened a bug in our bug tracker.

Alhuck
16 Mar 2014, 11:07 PM
Hi I am having a serious trouble because of this interchange of edit events!!!

Is there any workaround available for this bug with extjs 4.2.2 version ?

Thank You

Felicitus
5 Nov 2015, 4:51 AM
This issue is still present in ExtJS6.