Extjs Extend Grid Roweditor Plugin (для редактирования массива)

Question

Я использовал Плагин редактирования сетки extjs Довольно либерально для операций CRUD в веб -приложениях. Теперь у меня есть требование, чтобы разрешить отредактировать запись базы данных вместе с соответствующей коллекцией/массивом (из другого хранилища данных), используя этот плагин редактирования строк.

Для этого я хочу вставить сетки Drag-N-Drop в строку, которая была выбрана для редактирования, одна сетка, показывающая доступные (неиспользованные) предметы сбора слева и другая сетка для сохранения определенных предметов сбора справа.

Чтобы проиллюстрировать, что я пытаюсь сделать, вот обычный плагин редактирования строк с строкой, выбранной для редактирования:

Я пытаюсь сделать это (сетки Drag-n-капля внутри редактора строк 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/