Question

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

有没有解决方案？

Answer 1

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

Answer 2

KeyNav是一个导航包装器，允许您将导航键直接绑定到函数调用。 API文档提供了如何使用它的好例子：

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

Grid'keydown'事件不会捕获特殊键，如箭头键或Enter或Tab

2 个答案: