问题一个页面有两个面板，都有一个【添加(F2)】按钮，如何做快捷键支持？图片示意

第一次实现

感觉应该很简单，ExtJs提供了“Ext.util.KeyMap”，很容易做快捷键支持。

代码示例

复制代码 代码如下:

/// <reference path="Ext/ext-all-debug-w-comments.js" />

Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {

layout: {

type: 'vbox',

align: 'stretch'

},

padding: 10,

items: [{

xtype: 'panel',

id: 'panelA',

title: '快捷键测试A',

tbar: [{

text: '添加(F2)'

}],

frame: true,

flex: 1,

html: '您好，这里显示的表格或表单 。'

}, {

xtype: 'panel',

id: 'panelB',

title: '快捷键测试B',

tbar: [{

text: '添加(F2)'

}],

frame: true,

flex: 1,

html: '您好，这里显示的表格或表单 。'

}]

});

Ext.create('Ext.util.KeyMap', {

target: 'panelA',

key: Ext.EventObject.F2,

fn: function (key, ev) {

alert('添加A');

ev.stopEvent();

return false;

}

});

Ext.create('Ext.util.KeyMap', {

target: 'panelB',

key: Ext.EventObject.F2,

fn: function (key, ev) {

alert('添加B');

ev.stopEvent();

return false;

}

});

});

实际结果

打开浏览器后直接按F2没有效果；打开浏览器后用鼠标点击A或B后再按F2同样没有效果。

第二次实现

原来是div元素必须增加tabindex=0的属性才行。

代码示例

复制代码 代码如下:

/// <reference path="Ext/ext-all-debug-w-comments.js" />

Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {

layout: {

type: 'vbox',

align: 'stretch'

},

padding: 10,

items: [{

xtype: 'panel',

id: 'panelA',

title: '快捷键测试A',

tbar: [{

text: '添加(F2)'

}],

frame: true,

flex: 1,

html: '您好，这里显示的表格或表单 。',

autoEl: {

tag: 'div',

tabindex: 0

}

}, {

xtype: 'panel',

id: 'panelB',

title: '快捷键测试B',

tbar: [{

text: '添加(F2)'

}],

frame: true,

flex: 1,

html: '您好，这里显示的表格或表单 。',

autoEl: {

tag: 'div',

tabindex: 0

}

}]

});

Ext.create('Ext.util.KeyMap', {

target: 'panelA',

key: Ext.EventObject.F2,

fn: function (key, ev) {

alert('添加A');

ev.stopEvent();

return false;

}

});

Ext.create('Ext.util.KeyMap', {

target: 'panelB',

key: Ext.EventObject.F2,

fn: function (key, ev) {

alert('添加B');

ev.stopEvent();

return false;

}

});

});

实际结果

打开浏览器后直接按F2没有效果；打开浏览器后用鼠标点击A或B后再按F2就有效果了。

第三次实现

要解决打开浏览器之后不用点击div就能识别快捷键，需要手动调用foucs()方法。

代码示例

复制代码 代码如下:

/// <reference path="Ext/ext-all-debug-w-comments.js" />

Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {

layout: {

type: 'vbox',

align: 'stretch'

},

padding: 10,

items: [{

xtype: 'panel',

id: 'panelA',

title: '快捷键测试A',

tbar: [{

text: '添加(F2)'

}],

frame: true,

flex: 1,

html: '您好，这里显示的表格或表单 。',

autoEl: {

tag: 'div',

tabindex: 0

}

}, {

xtype: 'panel',

id: 'panelB',

title: '快捷键测试B',

tbar: [{

text: '添加(F2)'

}],

frame: true,

flex: 1,

html: '您好，这里显示的表格或表单 。',

autoEl: {

tag: 'div',

tabindex: 0

}

}]

});

Ext.create('Ext.util.KeyMap', {

target: 'panelA',

key: Ext.EventObject.F2,

fn: function (key, ev) {

alert('添加A');

ev.stopEvent();

return false;

}

});

Ext.create('Ext.util.KeyMap', {

target: 'panelB',

key: Ext.EventObject.F2,

fn: function (key, ev) {

alert('添加B');

ev.stopEvent();

return false;

}

});

Ext.get('panelB').focus();

});

实际结果

打开浏览器后直接按F2有效果了；打开浏览器后用鼠标点击A或B后再按F2就有效果了。

【关于ExtJS4.1:快捷键支持的问题】相关文章：

★ 多个iframe自动调整大小的问题

★ 浅析Javascript匿名函数与自执行函数

★ 给网页加个彩色窗口

★ js对象和json对象互相转换的问题

★ angular2使用简单介绍

★ JavaScript中操作字符串小结

★ JavaScript中setMonth()方法的使用详解

★ 关于JavaScript作用域你想知道的一切

★ 发现的以前不知道的函数

★ 解决未知尺寸的图片撑破页面的问题