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


Posted in Javascript onApril 24, 2013

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

关于ExtJS4.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就有效果了。
Javascript 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
js实现图片懒加载效果
Jul 17 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
详解微信UnionID作用
May 15 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
Jquery实现三层遍历删除功能代码
Apr 23 #Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 #Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 #Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 #Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 #Javascript
js事件冒泡实例分享(已测试)
Apr 23 #Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 #Javascript
You might like
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
防止文件缓存的js代码
2013/01/10 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
python操作xml文件示例
2014/04/07 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python爬取淘宝商品销量信息
2018/11/16 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
给分销商的致歉信
2014/01/14 职场文书
房地产开发项目建议书
2014/05/16 职场文书
调研座谈会发言材料
2014/08/23 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
Golang 并发编程 SingleFlight模式
2022/04/26 Golang