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

更新时间：2013年04月24日 09:18:54 作者：

本篇文章小编为大家介绍，关于ExtJS4.1 快捷键支持的问题。需要的朋友参考下

问题一个页面有两个面板，都有一个【添加(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就有效果了。

WebStorm中如何将自己的代码上传到github示例详解
这篇文章主要介绍了WebStorm中如何将自己的代码上传到github,本文分步骤通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
JavaScript实现计算器的四则运算功能
这篇文章主要为大家介绍了如何通过JavaScript实现计算器的四则运算功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手试试
2022-02-02
JS实现区分中英文并统计字符个数的方法示例
这篇文章主要介绍了JS实现区分中英文并统计字符个数的方法,涉及JavaScript事件响应、正则匹配及数值运算相关操作技巧,需要的朋友可以参考下
2018-06-06
用javascript修复浏览器中头痛问题的方法整理篇[译]
我们提倡无论何时都尽可能地使用CSS,这样我们更容易取得成功.现在浏览器对CSS的支持已经非常好,肯定足以让你用来控制你的网页布局与排版.但,即使如此,还是有某些页面元素会在不同的浏览器下表现也不一样.
2008-11-11
在for循环中length值是否需要缓存
这篇文章主要介绍了在for循环中length值是否需要缓存,需要的朋友可以参考下
2015-07-07
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
这篇文章主要介绍了JavaScript数据结构与算法之二叉树插入节点、生成二叉树,结合实例形式较为详细的分析了javascript二叉树相关概念、定义、节点插入、遍历输出等相关操作技巧,需要的朋友可以参考下
2019-02-02
如何基于viewport vm适配移动端页面
这篇文章主要介绍了如何基于viewport vm适配移动端页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
BootStrap导航栏问题记录
这篇文章主要介绍了BootStrap导航栏问题记录,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-07-07
js中toString()函数与valueOf()函数使用与区别
在等于运算符中，如果比较的内容包含对象类型数据，则会涉及隐式转换，那么就会调用toString()函数和valueOf()函数，本文主要介绍了 js中toString()函数与valueOf()函数使用与区别，感兴趣的可以了解一下
2022-04-04
如何利用Javascript生成平滑曲线详解
相信大家都遇到过,在各种图表框架中经常会有将一段折线平滑的需求,不仅能给用户带来一种柔和的感觉,还能美化界面,让折线看起来没那么生硬,这篇文章主要给大家介绍了关于如何利用Javascript生成平滑曲线的相关资料,需要的朋友可以参考下
2021-07-07