Extjs 4 cellEditing插件不适用于多个网格

Question

我有一个包含2个或更多网格的简单页面，我想使用CellEditing插件来编辑这些网格的单元格。

如果我只有一个网格一切正常，但如果我制作2个网格（或更多）CellEditing插件停止工作。

有谁知道如何解决这个问题？

我做了一个受此问题影响的小例子。

在此示例中，您可以尝试向第一个网格添加行，然后双击以编辑该网格。 正如您所见，单元格编辑根本不起作用。 如果在第二个网格中添加和编辑单元格，则可以正常工作。

在这里你可以找到jsfiddle中的例子： http ： //jsfiddle.net/eternasparta/amHRr/

这是javascript代码：

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()
    });
});

任何帮助表示赞赏，谢谢！

Answer 1

只需在initComponent ： demo中放置Object或数组类型（在您的case - items中）的配置。

欲了解更多信息请参阅我的答案在这里 。

Answer 2

您可以为每个网格创建单独的对象

//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
});

它将为不同的网格创建不同的实例。 测试工作正常:)