Ext Js Gridの特定のセルにコンボボックスを追加する方法は？

Question

Ext Jsグリッドで構築されたアプリケーションテーブルで、コンボボックスを特定のセルに追加したい[デモ画像が添付されました]、コンボボックス全体のセル変更をコンボボックスに追加しようとすると、しかし、私はコンボボックスであるためには特定の細胞が必要です。ここで私のコードは、私はそれを助けていないドキュメントや他のものを検索しました。問題を解決してください。

 Ext.define('OtherCharges1', { 
      extend: 'Ext.data.Model', 
      fields: [ 
       {name: 'name', mapping: 'name'}, 
       {name: 'age', mapping: 'age'}, 
       {name: 'marks', mapping: 'marks'}, 
       {name: 'rate', mapping: 'rate'} 
      ] 
     }); 
     var newData1 = [ 
      {name: "Freight"}, 
      {name: "Insurance" }, 
      {name: " Addl Chrg(High Sea)"}, 
      {name: "Revenue Deposit on"} 
     ] 
     var gridStore3 = Ext.create('Ext.data.Store', { 
      model: 'OtherCharges1', 
      data: newData1 
     }); 
     var otherStore1 = Ext.create('Ext.grid.Panel', { 
      cls: 'custom-grid', 
      id: 'OtherId', 
      store: gridStore3, 
      stripeRows: true, 
      width: '100%', 
      collapsible: false, 
      enableColumnMove: false, 
      columnLines: true, 
      sortableColumns: false, 
      enableColumnHide: false, 
      enableColumnResize: false, 
      enableRowHeightSync: true, 
      columns: 
        [ 
         { 
          header: "", 
          dataIndex: 'name', 
          flex: 1 

         }, 
         { 
          editor: { 
           xtype: 'textfield', 
           selectOnFocus: true 
          }, 
          dataIndex: '', 
          flex: .5, 
          sortable: true, 
          hideable: false, 
         }, 
         { 
          editor: { 
           xtype: 'textfield', 
           selectOnFocus: true 
          }, 
          dataIndex: 'age', 
          flex: .5, 
          sortable: true, 
          hideable: false, 
         }, 
         { 
          editor: { 
           xtype: 'textfield', 
           selectOnFocus: true 
          }, 
          dataIndex: 'marks', 
          flex: .5, 
          sortable: true, 
          hideable: false, 
         }, 
         { 
          editor: { 
           xtype: 'textfield', 
           selectOnFocus: true 
          }, 
          dataIndex: 'rate', 
          flex: .5, 
          sortable: true, 
          hideable: false, 
         }], 
      selType: 'cellmodel', 
      plugins: [ 
       Ext.create('Ext.grid.plugin.CellEditing', { 
        clicksToEdit: 1 
       })] 
     }); 

Answer 1

あなたがbeforeeditイベントを編集する必要があり、特定のセルにグリッドを編集可能にするには。検証を作成して、必要なセルを編集していることを確認します。

あなただけの1列目のセルを編集します。この場合

と行1

grid.on('beforeedit', function(editor, e) { 
    if (e.colIdx === 1 && e.rowIdx === 1) 
    { 
     return true; 
    } 
    else 
    { 
     return false; 
    } 
}); 

ExtJSのグリッドを明確にするために0
See this example fidlle.