在 extjs 经典网格中开始单元格编辑

Question

我正在使用Ext.grid.plugin.CellEdit插件在网格单元格中启用就地编辑。 在一种情况下，我想以编程方式进入特定单元格的编辑模式。 看起来这样做的旧方法是使用 startEdit 方法：

http://docs.sencha.com/extjs/6.2.1/classic/Ext.grid.plugin.CellEditing.html#method-startEdit

但它现在被标记为已弃用，并带有以下注释：

使用网格的可操作模式激活单元格内容。开始 编辑指定的记录，使用指定的列定义 定义正在编辑的字段。

可操作模式采用一个布尔值，用于打开/关闭 ARIA 可操作模式。我不知道打开该模式后我需要做什么才能真正开始编辑单元格。有什么建议吗？

Answer 1

实际上 setActionableMode 方法采用两个参数

@param {Boolean} enabled
@param {Ext.grid.CellContext} position

如何获得CellContext？

grid.getView().getPosition(record, grid.getColumns()[0])

在这个小提琴中，我创建了一个使用 grid 、cellediting 和 setActionableMode 的演示。我希望这能帮助/指导您实现您的要求。

代码片段

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.define('MyModel', {
            extend: 'Ext.data.Model',
            fields: ['name', 'email', 'phone']
        });
        Ext.create('Ext.data.Store', {
            storeId: 'myStore',
            model: 'MyModel',
            data: [{
                name: 'Lisa',
                email: '[e-mail]',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: '[e-mail]',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: '[e-mail]',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: '[e-mail]',
                phone: '555-222-1254'
            }]
        });
        Ext.create('Ext.grid.Panel', {
            title: 'My Data',
            store: 'myStore',
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    completeOnEnter: false,
                    // If the editor config contains a field property, then
                    // the editor config is used to create the Ext.grid.CellEditor
                    // and the field property is used to create the editing input field.
                    field: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }
            }, {
                header: 'Phone',
                flex: 1,
                dataIndex: 'phone'
            }],
            selModel: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            renderTo: Ext.getBody(),
            tools: [{
                type: 'plus',
                handler: function () {
                    var grid = this.up('grid'),
                        store = grid.getStore(),
                        rec = Ext.create('MyModel', {
                            name: '',
                            email: '',
                            phone:'1234567890'
                        }),
                        context;
                    store.add(rec);
                    //Get Ext.grid.CellContext of first cell using getColumns()[0]
                    context = grid.getView().getPosition(rec, grid.getColumns()[0])
                    //Start editing in first cell
                    grid.setActionableMode(true, context);
                }
            }]
        });
    }
});