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

Question

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

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

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

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

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

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

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

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/