ExtJS4.2:快捷键支持(没有你想象的那么简单)
2013-04-24 06:59
309 查看
问题
一个页面有两个面板,都有一个【添加(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: '您好,这里显示的表格或表单 。', 21 autoEl: { 22 tag: 'div', 23 tabindex: 0 24 } }, { xtype: 'panel', id: 'panelB', title: '快捷键测试B', tbar: [{ text: '添加(F2)' }], frame: true, flex: 1, html: '您好,这里显示的表格或表单 。', 35 autoEl: { 36 tag: 'div', 37 tabindex: 0 38 } }] }); 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就有效果了。备注
这个Demo纯属为了学习如何支持快捷键,真实项目中的快捷键支持需要通过封装在应用框架,做到对开发人员透明。相关文章推荐
- lnmp没有想象的那么简单
- 其实,程序员没有我想象得那么简单(算是2016的简单总结吧...)
- java——覆盖equals方法没有想象中那么简单
- 矩阵的平移(translate)没有想象的那么简单
- 单例模式_没有想象中那么简单
- java——覆盖equals方法没有想象中那么简单
- strlen源码,远没有想象中的那么简单、、、、
- 没有我想象的那么简单。
- [冲刺攻略] 公考其实没有你想象的那么难!(行测80分高手独家经验分享)
- 实体类的枚举属性--原来支持枚举类型这么简单,没有EF5.0也可以
- 全站 HTTPS 没你想象的那么简单
- 增加GDI字体的支持,原来是那么简单
- javascript下的数值型比较真的没有那么简单
- javascript下的数值型比较真的没有那么简单
- 制作数据地图:没有想象中的那么难!
- Java中的Synchronized,有时候没有那么简单
- 重视命名,应该没有看起来那么简单
- 网络战争 不是我们想象的那么简单
- select-没有你想象那么难.
- 二分查找真的有你想象中那么简单吗?