Подтвердить что ты не робот

ExtJS расширяет сетку RowEditor плагин (для редактирования массива)

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

Чтобы сделать это, я хочу вставить сетки drag-n-drop внутри строки, которая была выбрана для редактирования, одна сетка показывает доступные (неиспользованные) элементы коллекции слева и другую сетку для хранения определенных элементов коллекции на право.

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

grid with row editing

Я пытаюсь это сделать (сетки drag-n-drop внутри редактора строк div):

grid with row editing plus another grid inside

Чтобы сделать это, я пытался просто запустить что-то вроде Ext.getCmp(???).add(myDnDGridPanel);, но я не нашел нужную вещь для присоединения к этому (что помещать в вопросительные знаки).

Кажется достаточно разумным использовать этот плагин для редактирования связанной коллекции/массива вместе с записью базы данных. Кто-нибудь знает простой способ добавления элементов в этот редактор строк div?

Или... мне придется взломать/расширить плагин, чтобы выполнить это?

4b9b3361

ОТВЕТЫ

Ответ 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/