Extjs 4 cellEditing 插件不适用于一个以上的网格答案

【问题标题】：Extjs 4 cellEditing plugin doesn't work with more then one gridExtjs 4 cellEditing 插件不适用于一个以上的网格
【发布时间】：2013-05-14 21:10:21
【问题描述】：

我有一个包含 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()
    });
});

感谢您的帮助，谢谢！

【问题讨论】：

不相关的建议：不要将ext-all.css 的内容放入 jsfiddle 的 css 窗口中（页面一直在加载）

标签： javascript extjs extjs4

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

只需将对象或数组类型的配置（在您的情况下 - 项目）放入 initComponent: demo。

更多信息见我的回答here。

【讨论】：