Extjs 4 cellEditing plugin doesn't work with more then one grid

Question

I have a simple page with 2 or more grids and I want to use CellEditing plugin to edit cells of those grids.

If I have only a grid all works well, but if I make 2 grids (or more) CellEditing plugin stop to work.

Anyone know how to solve this problem?

I have made a little minimized example that is affected with this problem.

In this example you can try to add a row to the first grid and double click to edit that grid. As you can see cell editing doesn't work at all. If you add and edit the cell in the second grid, it work.

here you can found the example in jsfiddle: http://jsfiddle.net/eternasparta/amHRr/

and this is the javascript code:

Ext.require([
    'Ext.form.*',
    'Ext.tip.*']);

var store = Ext.create('Ext.data.Store', {
    fields: ['label'],
    data: []
});
Ext.define('AM.view.editpanel.CustomList', {
    extend: 'Ext.container.Container',
    alias: 'widget.sclist',
    layout: {
        type: 'vbox',
        align: 'stretch'

    },
    items: [{
        xtype: 'grid',
        plugins: [],
        selModel: {
            selType: 'cellmodel'
        },
        tbar: [{
            text: 'Add',
            actionId: 'add',
            handler: function (th, e, eArg) {
                var store = th.up('grid').store;
                var r = Ext.create(store.model.modelName);
                store.insert(0, r);

            }
        }],
        height: 200,
        store: store,
        columns: [{
            text: 'Name',
            dataIndex: 'label',
            flex: 1,
            editor: {
                xtype: 'numberfield',
                allowBlank: false
            }
        }, {
            xtype: 'actioncolumn',
            width: 30,
            sortable: false,

            actionId: 'delete',
            header: 'delete',
            items: [{
                tooltip: 'tool'

            }]
        }],
        flex: 1
    }],
    flex: 1,
    initComponent: function () {
        this.items[0].plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 2
        }));


        this.callParent(arguments);

        var sto = Ext.create('Ext.data.Store', {
            fields: ['label'],
            data: []
        });
        this.down('grid').bindStore(sto);
        this.down('grid').columns[0].text = 'Name';
        this.down('grid').columns[0].dataIndex = 'label';
    }
});



Ext.onReady(function () {


    Ext.QuickTips.init();

    var grid1 = Ext.create('AM.view.editpanel.CustomList', {
        renderTo: Ext.getBody()
    });
    var grid2 = Ext.create('AM.view.editpanel.CustomList', {
        renderTo: Ext.getBody()
    });
});

Any help is appreciated, thank you!

Answer 1

Just put configs of Object or array type (in your case - items) inside initComponent: demo.

For more info see my answer here.

Answer 2

You can create separate objects for each grid like

//For grid 1
var rowEditing1 = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: true
});

//For grid 2    
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: true
});

It will create different instances for the different grids. Tested Working fine :)