Start cell editing in extjs classic grid

Question

I'm using the Ext.grid.plugin.CellEditing plugin to enable in place editing in of a grid cell. In one case, I'd like to programmatically enter edit mode of a particular cell. It looks the old way to do this would be to use startEdit method:

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

But it's now marked as deprecated with the note:

Use the grid's actionable mode to activate cell contents. Starts editing the specified record, using the specified Column definition to define which field is being edited.

The actionable mode takes a boolean that turns on ARIA actionable mode on/off. I don't know what I'd need to do, after turning that mode on, to actually start editing the cell. Any suggestions?

Answer 1

Actually setActionableMode method take two parameters

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

How to get CellContext?

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

In this FIDDLE, I have created a demo using grid, cellediting and setActionableMode. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

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: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                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);
                }
            }]
        });
    }
});