ExtJS 4：編集可能なグリッド内のExcelスタイルのキーボードナビゲーション

Question

ExtJSの使用4ユーザーが長い番号のリストを入力するためのグリッドを作成します。ユーザーが「Enter」を押して1つのセルの編集を終了し、自動的に下のセルに移動して編集を開始できるようにします。

Ext.grid.plugin.CellEditingは編集の目的ではうまくいくようですが、keyUpイベントを検出して処理する方法が見つかりません。

私はこのコードで「編集」イベントを使用して問題に近づいてみました：

selType: 'cellmodel', 
plugins: [ 
    Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1, 
     listeners: { 
      edit: function (editor, e, eOpts) { 
       // If the event is fired by pressing "Enter", the column and row associated with event will 
       // be the same as the currently selected row and column 

       if (e.grid.selModel.position.column == e.colIdx && e.grid.selModel.position.row == e.rowIdx){ 

        // Check if we are in the final row 
        if (e.rowIdx+1 == e.grid.getStore().getTotalCount()){ 
         return true; 
        } 

        editor.startEditByPosition({row: e.rowIdx+1, column: e.colIdx}); 
        return false; 
       } 
      } 
     } 
    }) 
], 

このアプローチの問題は、ユーザーがセルの編集を開始した場合、その後の外のGUI要素をクリックすることですグリッドでは、編集イベントはこれを「Enter」キーが押されているのと区別しません。これは修正できますか？

代わりにカスタムSelectionModelを実装する必要がありますか？どのようにそのアプローチから始めようとしていますか？

Answer 1

何かthis ??? tab、shift + tab、enterを使用してみてください編集、およびshift + enter

とき
上書きされて私は何をやったcelleditingとselection.rowmodel

は実際に、私はあなたと同様のquestionがありました。 @Lionel Chanは私がそれを解決するのを助けます。
上記の私のソリューションは彼の考えに基づいています。

注："ワルンナシゴレン49" の提案を皮切りだけExtJSの4.0.7で動作

---

EDIT（私のjsfiddleが壊れた場合、ここでのオーバーライドがあります）

Ext.override(Ext.grid.plugin.CellEditing,{ 
    onSpecialKey: function(ed, field, e) { 
     var grid = this.grid,sm; 
     if (e.getKey() === e.TAB) { 
      e.stopEvent(); 
      sm = grid.getSelectionModel(); 
      if (sm.onEditorTab)sm.onEditorTab(this, e); 
     }else if(e.getKey() === e.ENTER){ 
      e.stopEvent(); 
      sm = grid.getSelectionModel(); 
      if (sm.onEditorEnter)sm.onEditorEnter(this, e); 
     } 
    } 
}); 

Ext.override(Ext.selection.RowModel, { 
    lastId:null, 
    onEditorTab: function(ep, e) { 
     var me = this, 
      view = me.view, 
      record = ep.getActiveRecord(), 
      header = ep.getActiveColumn(), 
      position = view.getPosition(record, header), 
      direction = e.shiftKey ? 'left' : 'right', 
      newPosition = view.walkCells(position, direction, e, false), 
      newId=newPosition.row, 
      grid=view.up('gridpanel'); 

     if (me.lastId!=newId && me.lastId!=null){ 
      deltaX = me.lastId<newId? -Infinity : Infinity; 
      header=grid.headerCt.getHeaderAtIndex(newPosition.column); 
      if(header){ 
       while(!header.getEditor()){ 
        newPosition= view.walkCells(newPosition,direction, e, false); 
        header=grid.headerCt.getHeaderAtIndex(newPosition.column); 
       } 
      } 
     }else{ 
      deltaX = ep.context.column.width * (direction== 'right' ? 1 : -1); 
     } 
     grid.scrollByDeltaX(deltaX); 
     me.lastId=newPosition.row; 
     Ext.defer(function(){ 
      if (newPosition)ep.startEditByPosition(newPosition); 
      else ep.completeEdit(); 
     }, 100); 
    }, 
    onEditorEnter:function(ep,e){ 
     var me = this, 
      view = me.view, 
      record = ep.getActiveRecord(), 
      header = ep.getActiveColumn(), 
      position = view.getPosition(record, header), 
      direction = e.shiftKey ? 'up' : 'down', 
      newPosition = view.walkCells(position, direction, e, false), 
      newId=newPosition.row, 
      grid=view.up('gridpanel'); 

     deltaY=20 * (direction== 'down' ? 1 : -1); 
     grid.scrollByDeltaY(deltaY); 
     me.lastId=newPosition.row; 
     Ext.defer(function(){ 
      if (newPosition)ep.startEditByPosition(newPosition); 
      else ep.completeEdit(); 
     }, 100); 
    } 
}); 

Answer 2

、 私はこれを上書きしました：

Ext.define('Override.Ext.grid.plugin.CellEditing', 
{ 
    override: 'Ext.grid.plugin.CellEditing', 
    onSpecialKey: function (ed, field, e) { 
     var grid = this.grid, 
      nbCols = grid.columns.length - 1, //start from 0 
      nbRows = grid.getStore().getTotalCount() - 1, //start from 0 
      currentCol = this.context.colIdx, 
      currentRow = this.context.rowIdx; 

     //forward 
     if (!e.shiftKey && (e.getKey() === e.ENTER || e.getKey() === e.TAB)) { 
      e.stopEvent(); 

      //Detect next editable cell 
      do { 
       if (this.startEdit(currentRow, currentCol + 1)) 
        break; 
       else { 
        currentCol++; 
        if (currentCol >= nbCols) { 
         currentRow++; 
         currentCol = -1; 
        } 
       } 
      } while (currentRow <= nbRows); 
     } 
     //backward 
     if (e.shiftKey && (e.getKey() === e.ENTER || e.getKey() === e.TAB)) { 
      e.stopEvent(); 

      //Detect previous editable cell 
      do { 
       if (this.startEdit(currentRow, currentCol - 1)) 
        break; 
       else { 
        currentCol--; 
        if (currentCol < 0) { 
         currentRow--; 
         currentCol = nbCols+1; 
        } 
       } 
      } while (currentRow >=0); 
     } 
    } 
}, 
null); 

このオーバーライドでは、TABとEnterキーの両方のナビゲーションが可能です（SHIFTを使用して進む/戻る）。

行の最後のセルに達すると、次の行の編集可能なセルがフォーカスされます。