CODEWITHSUNDEEP
extjs
Tobias Hagenbeek
Tobias Hagenbeek

Reputation: 1213

extjs onKeyEnter not firing

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..

Upvotes: 1

Views: 1004

Answers (1)

matt
matt

Reputation: 4047

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.

Upvotes: 3

Related Questions