ExtJS扩展网格RowEditor插件（编辑数组）

Question

我一直在使用ExtJS grid row editing plugin非常自由地在Web应用程序中进行CRUD操作。现在，我需要允许使用此行编辑插件编辑数据库记录以及相关的集合/数组（来自其他数据存储区）。

为此，我想在已选择进行编辑的行中插入拖放网格，一个网格显示左侧可用（未使用）的集合项目，另一个网格用于保存已定义的集合项目右边。

为了说明我想要做的事情，这里是正常的行编辑插件，其中选择了一行进行编辑：

我正在尝试这样做（在行编辑器div中拖放网格）：

要做到这一点，我一直试图简单地运行类似Ext.getCmp(???).add(myDnDGridPanel);的东西，但我没有找到正确的方法将其附加到（问题标记中放入什么）。

使用此插件编辑相关的集合/数组以及数据库记录似乎是合理的。有没有人知道向这个行编辑器div添加项目的简单方法？

或者......我是否必须破解/扩展插件才能完成此任务？

Answer 1

下面是示例RowEditing插件修改，允许添加其他组件。在这个演示中，这只是一个按钮，但它应该很容易定制。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false,
    listeners: {
        beforeedit: function(editor, e, eOpts) {
            var body = this.editor.body;
            var container = body.down('.container-for-extra-content');
            if (!container) {
                container = Ext.core.DomHelper.insertAfter(body.last(), '<div class="container-for-extra-content"></div>', true);
                container.setWidth(this.editor.body.getWidth(true));
                container.setHeight(this.extraHeight);

                this.editor.getEl().setHeight(this.editor.getEl().getHeight() + this.extraHeight);
                this.editor.body.setHeight(this.editor.body.getHeight() + this.extraHeight);

                var panelConfig = {
                    renderTo: container,
                    items: [this.extraComponent]
                };
                Ext.create('Ext.Panel', panelConfig);
            }
        },
        delay: 1
    },
    extraHeight: 100,
    extraComponent: {
        xtype: 'panel',
        items: [
            { xtype: 'button', text: 'Aloha!' }
        ]
    }
});

以下是工作示例：http://jsfiddle.net/e2DzY/1/