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/