Ext.grid.panel上的关键事件

Question

可能重复:
ExtJS 4及其新的MVC:grid:如何处理密钥？

我需要向Ext.grid.Panel添加关键监听器(即空间,左,右的关键监听器).实际上我需要在Panel上捕获'keyup'或其他一些关键相关事件.我尝试了一切但没有成功.有人有点想法吗？我正在使用Extjs 4.

Answer 1

如果组件没有直接暴露关键事件,则需要做一些工作.这可能不是解决这个问题的最好方法,但这是一个开始.

第一个技巧是知道一些DOM元素div不会触发键事件,除非它们有一个tab索引.所以做这样的事情:grid.getEl().set({tabindex: "0"})让事情滚动.

现在,您的网格元素将触发关键事件.下一步是添加一个以网格为目标的KeyMap.有几种方法可以做到这一点,但这里有一个很好的方法:

grid.getEl().addKeyMap({
    eventName: "keyup",
    binding: [{
        key: Ext.EventObject.SPACE,
        fn:  function(){ console.log("Space key pressed"); }
    },{
        key:   [Ext.EventObject.LEFT, Ext.EventObject.RIGHT],
        shift: true,
        fn:    function(){ console.log("Left or right pressed while pressing shift"); }
    }]
});

基本上,binding是一个对象数组,指定一个或多个要监听的键和一个触发的函数.如果查看Ext.util.KeyMap文档,可以了解更多相关信息.

注意eventName上面的使用.您可以为每个KeyMap设置一种类型的事件.因此,如果要绑定到keydown和keyup事件,则需要在同一元素上使用两个KeyMaps.