Ext js6.2、矢印キーを使用してテキストフィールドをナビゲート

Question

私はExt Js v6.2グリッドを使用しています。私のアプリケーションでは、3つのグループのテキストフィールドを持っています。ArrowKeyの[UP] [DOWN ] [右] [LEFT]以下のコードはExt jsで起動しないので、問題を解決してください。

スクリプトは

$(document).keydown(
    function(e) 
    {  
     if (e.keyCode == 39) {  
      $(".move:focus").next().focus(); 
     } 
     if (e.keyCode == 37) {  
      $(".move:focus").prev().focus(); 
     } 
    } 
); 

LIKE THIS-I WANT-DEMO

Answer 1

あなたはExtJSのでKeyNavを使用する必要があります。

Ext.util.KeyNavは、正規化されたキーボードナビゲーション用の便利なラッパーを提供します。 KeyNavを使用すると、キーが押されたときに呼び出される関数呼び出しにナビゲーションキーをバインドすることができ、UIコンポーネントのカスタムナビゲーションスキーマを簡単に実装できます。

ExtJsにはnext()とprev()というメソッドがありますので、このようなコンポーネントにはtextfield.next()とtextfield.prev()のように使用できます。

このFIDDLEで私はExt.util.KeyNavを使用してデモを作成しており、お客様の要件に応じて動作しています。これがあなたを助けたり、あなたの要件を達成するためにあなたを導くことを願っています。

Ext.create('Ext.panel.Panel', { 
    renderTo: Ext.getBody(), 
    title: ' Example with key Navigation', 
    layout: 'hbox', 
    defaults: { 
     xtype: 'textfield', 
     flex: 1, 
     margin: 10 
    }, 
    items: [{ 
     emptyText: 'A' 
    }, { 
     emptyText: 'B' 
    }, { 
     emptyText: 'C' 
    }, { 
     emptyText: 'D' 
    }, { 
     emptyText: 'E' 
    }], 
    listeners: { 
     afterrender: function() { 
      var panel = this; 
      panel.keynav = Ext.create('Ext.util.KeyNav', { 
       target: Ext.getBody(), 
       scope: panel, 
       left: panel.doFocusToText, 
       right: panel.doFocusToText 
      }); 
     } 
    }, 
    /* 
    * this will fire on left or right key pressed. 
    * @param {Event} e 
    */ 
    doFocusToText: function (e) { //{ http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.EventObject } 
     var panel = this, 
      current = panel.down('[hasFocus=true]'); 

     if (e.LEFT == e.getKey()) { 
      if (current.prev()) { 
       current.prev().focus(); 
      } 
     } else { 
      if (current.next()) { 
       current.next().focus(); 
      } 
     } 
    } 
});