网格“keydown”事件不会捕获特殊键，如箭头键或 Enter 或 Tab答案

【问题标题】：Grid 'keydown' event doesn't catch special keys like arrow keys or Enter or Tab网格“keydown”事件不会捕获特殊键，如箭头键或 Enter 或 Tab
【发布时间】：2011-08-02 08:32:33
【问题描述】：

我在捕捉 'keydown' 事件中的特殊键时遇到问题。但如果我使用 'keyup' 事件，一切都很好，但我不能使用它 .. 似乎某些控件捕获了该事件并停止为其他人进行，还是？为什么？

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'
                            }
                        }
                    ]
                }]
            }]
    });
});

有什么解决办法吗？

【问题讨论】：

您测试过哪些浏览器？
View 正在处理这些键以进行行选择。也许这就是原因。
@Marko 是的，你是对的，它处理这些用于在单元格之间导航的键.. 我很难过.. 那么解决方案是什么？覆盖视图导航过程或？
@missingno 我已经在 Chrome v12.0.742 和 IE v9.0.8112 上测试过

标签： javascript grid extjs4 keydown keyevent

【解决方案1】：

只是一个想法。您是否尝试过 KeyPress 而不是/以及 KeyDown？

【讨论】：

【解决方案2】：

KeyNav 是一个导航包装器，允许您将导航键直接绑定到函数调用。 API 文档有很好的使用示例：

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

【讨论】：