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

Posted 2021-05-06

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

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

但它现在被标记为已弃用：

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

可操作模式采用布尔值打开/关闭ARIA可操作模式。在打开该模式后，我不知道我需要做什么，实际上开始编辑单元格。有什么建议？

答案

实际上setActionableMode方法有两个参数

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

如何获得CellContext？

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

在这个FIDDLE中，我使用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);
                }
            }]
        });
    }
});