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
- });
- }
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);
- }
- },
- ...
- });