首页 / 脚本样式 / JavaScript / 关于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就有效果了。