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

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: 'gridcol开发者_开发问答umn',
                            dataIndex: 'phone',
                            header: 'Phone',
                            sortable: true,
                            width: 100,
                            align: 'right',
                            id: 'phone',
                            editor: {
                                xtype: 'textfield'
                            }
                        }
                    ]
                }]
            }]
    });
});

Is there any solution ?

---

Just a thought. Have you tried KeyPress instead of/as well as KeyDown?

---

KeyNav is a navigation wrapper that allows you to bind navigation keys directly to function calls. The API documentation has good examples for how to use it:

http://docs.sencha.com/ext-js/4-0/#/api/Ext.util.KeyNav