extjs onKeyEnter not firing - extjs

Question

Hello i have the following RowEditing plugin i use
ar rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
errorSummary:false,
onEnterKey: function(e) { console.log(e); },
listeners:{
'beforeedit':function(grid,eOpts){
},
'canceledit':function(grid, eOpts){
if(grid.grid.store.data.getAt(0).data.id == "new"){
grid.grid.store.removeAt(0);
}
},
'afteredit':function(editor, changes, record, rowIndex){
editor.grid.store.reload();
},
'validateedit': handleUpdate{{params.alias}}
}
});
But the enter action is still performed and no console log is performed... i tried to put it inside the listeners as well but no change...
here's my item in my grid
{
header: 'Description',
width: 160,
align: 'left',
dataIndex: 'description',
filters: {
type: 'string'
},
enableKeyEvents: true,
editor: {
xtype: 'textfield',
allowBlank: false,
listeners: {
keydown: {
element: 'el',
fn: function(el){
if (el.ENTER){
alert('test');
return false;
}
}
},
},
}
}
so my next try as to 'disable' the firing of the enter (or submitting the rowedit) inside the field itself. but a return false still submits the form, and a onEnterKey doesn't work there either... anyone has an idea what i am doing wrong?
I did find that onEnterKey is part of the parent Editing class but it doesn't say how i should call that..

Answer 1

First of all, onEnterKey is marked as private, so you shouldn't be overriding it, especially not upon instantiation. If you want to override class methods, you should do that by creating a new class which inherits from the class containing the methods:
Ext.define('My.grid.plugin.Editing', {
extends: 'Ext.grid.plugin.RowEditing',
onEnterKey: function() {
this.callParent(arguments);
// your code here
}
});
Regarding your problem, I suggest one of the following approaches:
A) If you really want to disable the ENTER key event only, you should do that on the editor field(s). Your attempt was close, but the event listener was not doing the right things yet:
editor: {
allowBlank: false,
listeners: {
keydown: function(e){
if (e.getKey() == e.ENTER){
e.stopEvent();
}
}
}
}
Note that with this approach the user will still be able to submit any change by just clicking the "Update" button of the row editing plugin.
B) If you just want to prevent the editing plugin from writing the changes to the store under certain conditions, you can also use the validateedit event on the editing plugin:
listeners: {
validateedit: function(editor, e) {
if (true) { // your condition here
return false;
}
}
}
This will also work, if the user clicks on the "Update" button.