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

它將為不同的網格創建不同的實例。 測試工作正常:)