手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >关于ExtJS4.1:快捷键支持的问题
关于ExtJS4.1:快捷键支持的问题
摘要:问题一个页面有两个面板,都有一个【添加(F2)】按钮,如何做快捷键支持?图片示意第一次实现感觉应该很简单,ExtJs提供了“Ext.util...

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

关于ExtJS4.1:快捷键支持的问题1

第一次实现

感觉应该很简单,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:快捷键支持的问题】相关文章:

angular2使用简单介绍

Jquery zTree 树控件异步加载操作

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

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

jQuery+ajax实现无刷新级联菜单示例

关于IFRAME 自适应高度的研究

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

javascript判断并获取注册表中可信任站点的方法

JavaScript静态的动态

JavaScript中的Math.SQRT1_2属性使用简介

精品推荐
分类导航