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

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

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

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

сетка с редактированием строк

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

сетка с редактированием строк плюс еще одна сетка внутри

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

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

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


extjs extjs4
person egerardus    schedule 10.01.2012    source источник
comment
Коллекция.. Хм, что я могу придумать, так это расширить RowEditing и добавить в него сетки...   -  person Lionel Chan    schedule 11.01.2012

Ответы (1)


arrow_upward
11
arrow_downward

Ниже приведен пример 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/

person Krzysztof    schedule 11.01.2012
comment
Спасибо, Лоло... очень полезно. :) - person Jack Stone; 14.02.2013