關於ExtJS4.1:快捷鍵支援的問題_javascript技巧

問題一個頁面有兩個面板，都有一個【新增(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: {
                   },
         padding: 10,
         items: [{
             xtype: 'panel',
             id: 'panelA',                 tbar: [{
                 ],
             frame: true,
            🎜>         }, {
             xtype: 'panel',
             id: 'panelB',
            , title: 'T              text: '新增(F2)'
            
             flex: 1,
              

     Ext.create('Ext.util. KeyMap', {
         target: 'panelA',
         key: Ext.EventObject.F2, (fn ): f        alert('新增A');

             ev.stopEvent();

            🎜>
     Ext.create('Ext.util.KeyMap', {
target: 'panelB',
         key: Ext.EventObject.F2,
        >
             ev.stopEvent( );

             return false;
         }
開啟瀏覽器後直接按F2沒有效果​​；打開瀏覽器後用滑鼠點選A或B後再按F2同樣沒有效果。

第二次實作

原來是div元素必須增加tabindex=0的屬性才行。
程式碼範例


複製程式碼

程式碼如下:

///

 Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {
         layout: {
         'stretch'
         },
         padding: 10 ,
         items: [{
             xtype: 'panel',             tbar: [{
    '新增(F2)'
             }],
                        html: '你好，這裡顯示的表格或表單。
                 tag: 'div',
                 tabindex: 0
             }
         }, {
             xtype: 'panel',
             id: 'panelB',
             title: '快捷鍵測試B',
             tbar: [{
              🎜>             frame: true,
               好，這裡顯示的表格或表單。     tabindex: 0
             }
         }]
          }]
     );     Ext.create('Ext.util.KeyMap', {
         target: 'panelA',
   function (key, ev) {
             alert('新增A');

             🎜>         }
     });

     Ext.create( 'Ext.util.KeyMap', {
         target: 'panelB',
                     alert('新增B' );

             ev.stopEvent();

           });
 });


實際結果
開啟瀏覽器後直接按F2沒有效果​​；開啟瀏覽器後用滑鼠點擊A或B後再按F2就有效果了。

第三次實作
要解決開啟瀏覽器之後不用點選div就能辨識快速鍵，需要手動呼叫foucs()方法。
程式碼範例

複製程式碼 程式碼如下:

///

 Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {
         layout: {
         'stretch'
         },
         padding: 10 ,
         items: [{
             xtype: 'panel',             tbar: [{
    '新增(F2)'
             }],
                        html: '你好，這裡顯示的表格或表單。
                 tag: 'div',
                 tabindex: 0
             }
         }, {
             xtype: 'panel',
             id: 'panelB',
             title: '快捷鍵測試B',
             tbar: [{
              🎜>             frame: true,
               好，這裡顯示的表格或表單。     tabindex: 0
             }
         }]
          }]
     );     Ext.create('Ext.util.KeyMap', {
         target: 'panelA',
   function (key, ev) {
             alert('新增A');

             🎜>         }
     });

     Ext.create( 'Ext.util.KeyMap', {
         target: 'panelB',
                     alert('新增B' );

             ev.stopEvent();

           });

     Ext.get('panelB').focus( );
 });


實際結果
打開瀏覽器後直接按F2有效果了；打開瀏覽器後用滑鼠點擊A或B後再按F2就有效果了。