ExtJS扩展网格RowEditor插件(编辑数组)

Question

我一直在使用ExtJS网格行编辑插件,对于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/