Ext Js如何将组合框添加到网格中的特定单元格?

问题描述:

我正在使用Ext Js v6.2,在我用ext js grid构建的应用程序表中,我想添加组合框到特定单元格[DEMO IMAGE ATTACHED],当我尝试将组合框的整个单元格更改添加到组合框时,但我需要特定的单元格来组合框。在这里,我的代码,我在文档和其他东西中搜索它并没有帮助,请解决问题。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 
       })] 
     }); 

Ext Js Grid

+0

开始为了澄清,你想成为麦酒只编辑特定列中的某些单元格? –

+0

@EvanTrimboli已经可以编辑所有的单元格,我关心的是特定单元格具有组合框的变化。 –

+0

对,只有列中的一些单元格,不是所有的单元格? –

启用编辑的网格,你需要编辑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.