アドバイスは、ExtJSの4で必要な手助けセル編集：自動編集機能

Question

を私が質問に関連ExtJSのを検索し、任意の参照が見つかりませんでしたが、私は重複した質問を作ることに、事前に、それは申し訳ありません逃した場合。

ExtJS 4グリッドの作成方法については、セルの編集：自動編集機能をご利用ください。キーを押したときにセル編集モードにしたいと思っています。強調表示されたセルの「123」は、テキストが「123」で置き換えられます（存在する場合）。入力中のセル編集モードは、ENTERキーを押すかマウスでクリックすることで行うことができます。 http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html

任意のヒント、ポインタが感謝し、次のようになります。

はベースとして、私は煎茶は例を提供し使用しています。

ありがとうございます！ :)

実際に私は部分的に私の問題を解決しました。キープレスでセルを編集可能にする方法を発見しました。セル内でテキストを選択するためにselectOnFocus config paramを配置しました。これで、セル内に最初のchar（その編集モードを開始しました）を挿入する必要があります。

はそうではありません最も美しい解決策になることができますが、それは私のために働く:) をここで完全なコードは、今までです。

長い遅れて申し訳ありません

var tStore = Ext.create('Ext.data.Store', { 
    storeId:'simpsonsStore', 
    fields:['name', 'email', 'phone'], 
    data:{'items':[ 
     {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"}, 
     {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"}, 
     {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"}, 
     {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"} 
    ]}, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 

var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', { 
    clicksToEdit: 1 
}); 

var tGrid = Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: tStore, 
    columns: [ 
     {header: 'Name', dataIndex: 'name', field: 'textfield'}, 
     {header: 'Email', dataIndex: 'email', flex:1, 
      editor: { 
       xtype:'textfield', 
       allowBlank:false, 
       selectOnFocus: true 
      } 
     }, 
     {header: 'Phone', dataIndex: 'phone'} 
    ], 
    selType: 'cellmodel', 
    plugins: [tCellEdit], 
    listeners: { 
     keypress: { 
      element: 'el', 
      fn: function(iEvent, iElement) { 
       iCode = iEvent.getKey(); 
       if (iCode != undefined && iCode != iEvent.LEFT && iCode != iEvent.RIGHT && iCode != iEvent.UP && iCode != iEvent.DOWN && iCode != iEvent.ENTER && iCode != iEvent.ESC) { 
        var iView = tGrid.getView(); 
        var position = iView.selModel.position; 

        tCellEdit.startEditByPosition(position); 
       } 
      } 
     } 
    }, 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
}); 

Answer 1

が、人生、ジャガイモと私は本当に賢い今後のプロジェクトのグリッドのために必要なことを考え...海で座ってモヒートを飲み、私は休暇中だっただけで言うことができます。私はこれらの点について結論に至りました：

1. 私のグリッドでは人々が数字を書くためです。現在のセルの数字を押して編集モードに入ることに焦点を当てる必要があります。
2. 編集モードを有効にするだけでなく、新しい値として挿入する必要があります（キーボードで1を押すと、セルが編集モードに入り、新しい値として1が入力されます）。
3. ESCとENTERいつものように魔法の仕事。

全体的に私はExt.core.Elementにいくつかのオーバーライドを加えました（Windows 7でIE9とFirefox 6.0.2を使用して表示される奇妙なバグを修正するため）。Ext.grid .plugin.Editing（数字キーを押して編集モードに入る）とExt.Editor（新しい値を設定する）。

TODO：（Excelに似た）1

PSがある場合は、編集モードでは、押すことだけではなく、完全な編集を押しますが、一つ下のセルに移動したとき。私の母国語ではなく、私の英語で申し訳ありませんが、多分理解できます。また、入力とコメントに感謝！ ;）

/** 
* Fix for bug with cursor position in editor grid textfield 
* 
* Bug description: after loading an editor grid which contains a textfield, the cursor/caret is positioned at the 
* beginning of text field the first time the editor is activated. Subsequent activations position the caret at the end 
* of the text field. 
* In my case this behavior is not observed in Opera 11.51 (Windows 7) and IE8, Firefox 6.0.2 (Windows XP), but observed in IE9 and Firefox 6.0.2 (Windows 7) 
* 
* Current fix helps with IE9 problem, but Firefox 6.0.2 (Windows 7) still putting the cursor/caret at the beginning of text field. 
* 
* Forum post for ExtJS v3 about same problem and where the fix was found: http://www.sencha.com/forum/showthread.php?88046-OPEN-3.1-Caret-Cursor-Position-in-Editor-Grid-Textfield 
*/ 
Ext.core.Element.prototype.focus = function(defer, /* private */dom) { 
    var me = this, 
     dom = dom || me.dom; 
    try { 
     if (Number(defer)) { 
      Ext.defer(me.focus, defer, null, [null, dom]); 
     } else { 
      dom.focus(); 
      // start override 
      dom.value = dom.value; 
      dom.focus(); 
      if (dom.sof) { 
       dom.select(); 
      } 
      // end override 
     } 
    } catch (e) { } 
    return me; 
}; 
/** 
* END OF ALL FIXES 
*/ 

var tStore = Ext.create('Ext.data.Store', { 
    storeId:'simpsonsStore', 
    fields:['name', 'email', 'phone'], 
    data:{'items':[ 
     {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"}, 
     {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"}, 
     {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"}, 
     {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"} 
    ]}, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 

Ext.onReady(function() { 

    var newValue = ''; 

    /** 
    * Rewriting class Ext.grid.pluging.Editing to make cell go into edit mode by pressing numeric keys. 
    * 
    * changed: requirements: Ext.util.KeyNav -> Ext.util.KeyMap 
    * changed: accordingly made changes to use Ext.util.KeyMap in initEditTriggers function 
    * added: new function onNumberKey for replacing original value with new one and entering cell in edit mode 
    * 
    * tested only for Cell selection model, too lazy for Row selection model testing :P 
    */ 
    Ext.override(Ext.grid.plugin.Editing, { 

     requires: [ 
      'Ext.grid.column.Column', 
      'Ext.util.KeyMap' 
     ], 

     initEditTriggers: function() { 
      var me = this, 
       view = me.view, 
       clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'; 

      // Start editing 
      me.mon(view, 'cell' + clickEvent, me.startEditByClick, me); 
      view.on('render', function() { 
       me.keyNav = Ext.create('Ext.util.KeyMap', view.el, [ 
        { 
         key: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57], //
         fn: me.onNumberKey, 
         scope: me 
        }, { 
         key: 13, // ENTER 
         fn: me.onEnterKey, 
         scope: me 
        }, { 
         key: 27, // ESC 
         fn: me.onEscKey, 
         scope: me 
        } 
       ]); 
      }, me, { single: true }); 
     }, 

     onNumberKey: function(e) { 
      var me = this, 
       grid = me.grid, 
       selModel = grid.getSelectionModel(), 
       record, 
       columnHeader = grid.headerCt.getHeaderAtIndex(0); 

      // Calculate editing start position from SelectionModel 
      // CellSelectionModel 
      if (selModel.getCurrentPosition) { 
       pos = selModel.getCurrentPosition(); 
       record = grid.store.getAt(pos.row); 
       columnHeader = grid.headerCt.getHeaderAtIndex(pos.column); 
      } 
      // RowSelectionModel 
      else { 
       record = selModel.getLastSelected(); 
      } 

      // if current cell have editor, then save numeric key in global variable 
      ed = me.getEditor(record, columnHeader); 
      if (ed) { 
       newValue = String.fromCharCode(e); 
      } 

      // start cell edit mode 
      me.startEdit(record, columnHeader); 
     } 
}); 

    Ext.override(Ext.Editor, { 
     startEdit : function(el, value) { 
      var me = this, 
       field = me.field; 

      me.completeEdit(); 
      me.boundEl = Ext.get(el); 
      value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML; 

      if (!me.rendered) { 
       me.render(me.parentEl || document.body); 
      } 

      if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) { 
       me.startValue = value; 
       me.show(); 
       field.reset(); 
       field.setValue((newValue != '' ? newValue : value)); 
       me.realign(true); 
       field.focus(false, 10); 
       if (field.autoSize) { 
        field.autoSize(); 
       } 
       me.editing = true; 

       // reset global newValue 
       newValue = ''; 
      } 
     } 
    }); 
    /** 
    * END OF ALL OVERRIDES (thank god!) :) 
    */ 


    var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
    }); 

    var tGrid = Ext.create('Ext.grid.Panel', { 
     title: 'Simpsons', 
     store: tStore, 
     columns: [ 
      {header: 'Name', dataIndex: 'name', 
       editor: { 
        xtype: 'textfield', 
        maskRe: /[\d]/ 
       } 
      }, 
      {header: 'Email', dataIndex: 'email', flex:1, 
       editor: { 
        xtype:'textfield' 
       } 
      }, 
      {header: 'Phone', dataIndex: 'phone'} 
     ], 
     selType: 'cellmodel', 
     plugins: [tCellEdit], 
     height: 200, 
     width: 400, 
     renderTo: 'testgrid' 
    }); 
});