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

Question

我正在使用 Ext Js v6.2，在我用 ext js 网格构建的应用程序表中，我想将组合框添加到特定单元格 [DEMO IMAGE ATTACHED]，当我尝试添加组合框时整个单元格更改为组合框，但我需要特定的单元格为组合框。这是我的代码，我已经在文档和其他内容中搜索了它没有帮助。请解决问题。

        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.