Ext.grid.panel上的关键事件

Question

  

可能重复：
  ExtJS 4 and its new MVC: grid: how to handle keys?

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

Answer 1

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

第一个技巧是知道某些DOM元素（如div）不会触发键事件，除非它们具有制表符索引。所以做这样的事情：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。

Answer 2

对于初学者，请查看KeyMap。