Ext JS 键映射：键盘作为第一类操作对象

我强烈相信在应用中包括web应用应该将键盘作为第一类操作对象。这篇文章介绍了Ext JS拥有将键盘操作捆绑进入整个系统的能力：

Ext.KeyMap

Ext提供几个不同的组件，支持键盘导航，比如GridPanel，ComboBox和TreePanel。为了应用客户键盘操作，开发者能够使用Ext.KeyMap和Ext.KeyNav类来捆绑键盘操作给任何组件或者元素。

首先开发者需要操作的就是F1-12功能键。大多数浏览器预留一些键，通过ext-pertise，开发者能够覆盖缺省的功能为我们自己的应用使用。我们的应用完全是动态和服务器端驱动的，所以，我们必须预先定义键盘。我们可以动态创建一个键盘操作设置数组对象，通过我们新的Ext.KeyMap对象传递。

var keys = [];
for(var i = 0;i <buttons.length;i++) {
    var btn = buttons[i];
    // fkey property contains a string referencing the Ext constants (ie: Ext.EventObject.F1)
    var fk = eval(button.fkey);
    btn.handler = this.handleKey.createDelegate(this, [fk]);

    keys.push({
        key: fk,
        handler: this.handleKey.createDelegate(this, [fk]),
        stopEvent: true,
        scope: this
    });
}

Ext.KeyNav

另外的键操作是一些对网格键盘导航附加的功能。GridPanel从RowSelectionModel创建了键导航，查看这个 grid 例子和选择一行，你能使用上下箭头键来上下移动。

MyGrid = Ext.extend(Ext.grid.GridPanel,{
...

afterRender : function() {
   MyGrid.superclass.afterRender.call(this);

    this.nav = new Ext.KeyNav(this.getEl(),{
        pageDown: this.pagingNav.createDelegate(this,['next']),
        pageUp: this.pagingNav.createDelegate(this, ['prev']),
        home: this.pagingNav.createDelegate(this,['first']),
        end: this.pagingNav.createDelegate(this,['last']),
        scope: this
    });
},
 
pagingNav: function(page) {
    var pt = this.getBottomToolbar();
    if (!pt[page].disabled) {
        pt.onClick(page);
    }
},

...

});

详情请查看： Ext JS has keyboard handling