Grid 'keydown' event doesn't catch special keys like arrow keys or Enter or Tab ...

[mastak]

I have an issue with catching special keys on 'keydown' event.. but all works great if I use 'keyup' event, except I can't use it ..
Seems some control catches that event and stops proceeding for others or ? and why ?

Ext.onReady(function () {

    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'phone', type: 'string', mapping: 'phoneNumber' }
    ]
    });

    var data = {
        users: [
        {
            id: 1,
            name: 'Ed Spencer',
            phoneNumber: '555 1234'
        },
        {
            id: 2,
            name: 'Abe Elias',
            phoneNumber: '666 1234'
        }
    ]
    };

    var myStore = new Ext.data.Store({
        autoLoad: true,
        storeId: 'myStore',
        model: 'User',
        data: data,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    });

    var main = Ext.create('Ext.container.Viewport', {
        renderTo: document.body,
        layout: 'fit',
        items:
        [
            {
                xtype: 'panel',
                title: 'Main Panel',
                items: [
                {
                    xtype: 'gridpanel',
                    id: 'myGrid',
                    name: 'myGrid',
                    title: 'My Grid',
                    store: 'myStore',
                    selModel: Ext.create('Ext.selection.CellModel', {
                        mode: 'SINGLE',
                        listeners: {
                            select: {
                                element: 'el',
                                fn: function (editor, object, options) {
                                }
                            }
                        }
                    }),
                    plugins: [
                        Ext.create('Ext.grid.plugin.CellEditing', {
                            clicksToEdit: 1,
                            listeners: {
                                edit: {
                                    element: 'el',
                                    fn: function (editor, object, options) {
                                    }
                                }
                            }
                        })
                    ],
                    flex: 1,
                    listeners: {
                        keydown: {
                            element: 'el',
                            fn: function (eventObject, htmlElement, object, options) {
                                var pGrid = Ext.ComponentMgr.get('myGrid');
                                if (eventObject.keyCode == 40) // 13, 9
                                {
                                    if (pGrid.selModel.getCurrentPosition().row == pGrid.store.data.length - 1) {
                                        pGrid.store.add({ name: '', age: '', zipcode: '' });
                                    }
                                }
                            }
                        }
                    },
                    columns: [
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'id',
                            header: 'ID',
                            sortable: true,
                            width: 100,
                            id: 'id',
                            editor: {
                                xtype: 'numberfield'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            header: 'Name',
                            sortable: true,
                            width: 100,
                            id: 'name',
                            editor: {
                                xtype: 'textfield'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'phone',
                            header: 'Phone',
                            sortable: true,
                            width: 100,
                            align: 'right',
                            id: 'phone',
                            editor: {
                                xtype: 'textfield'
                            }
                        }
                    ]
                }]
            }]
    });
});

Is there any solution ?

[mberrie]

Shouldn't you define the listener on the editor (the textfield) which is defined in the column configuration?

You can then configure this editor with 'enableKeyEvents' set to 'true' (see the docs for TextField), and bind an event listener to the component without the element='el' config.
Alternatively, try binding to 'inputEl' since I'm not sure where the 'el' member points to in the TextField component.


I also noticed in your code that you don't always use the 'element' config for listeners correctly. Maybe clearing this up can help you find a solution to your problem.

Using 'element' will bind a listener to the DOM element. Those will only fire native DOM events and not enhanced Ext events like SELECT and EDIT (the key events are another story)

So in most cases you will want to omit the 'element' config entirely because you want to listen to events fired by the Ext component, and not by (one of) the underlying DOM element(s).

[mberrie]

Any update on this one?

[mastak]

@mberrie: "define the listener on the editor (the textfield) which is defined in the column configuration" - good idea, but I can't use it, because editor displayed only when I need to edit something, don't displayed automatically on cell focus event.
Here is my quick fix, reported as defect on sencha:
http://www.sencha.com/forum/showthread.php?142703-No-ability-to-catch-arrow-keys-on-keydown-event-for-Ext.selection.CellModel&p=633417#post633417
So you can see that there no ability to set 'defaultEventAction' value different from default 'stopEvent'.
I don't like such fix in third party code.. so hope they will look to defect and fix it in some way or by provided by me.