Extensión ExtJS grid Plugin RowEditor (para editar matriz)

Question

He estado usando el ExtJS grid row editing plugin bastante liberalmente para operaciones CRUD en aplicaciones web. Ahora, tengo el requisito de permitir que un registro de base de datos se edite junto con una colección/matriz relacionada (de otro almacén de datos) utilizando este plugin de edición de fila.

Para hacer esto, quiero insertar las cuadrículas de arrastrar y soltar dentro de una fila que se ha seleccionado para su edición, una cuadrícula que muestra los elementos de colección disponibles (no utilizados) a la izquierda y otra cuadrícula para contener los elementos de colección definidos a la derecha.

Para ilustrar lo que estoy tratando de hacer, aquí es el complemento normal de edición de fila con una fila seleccionada para la edición:

que estoy tratando de hacer esto (rejillas de arrastrar y soltar en el interior de div editor de fila):

para ello he estado tratando de funcionar simplemente algo así como Ext.getCmp(???).add(myDnDGridPanel); pero no he encontrado lo que hay que adjuntar a esta (qué poner en los signos de interrogación).

Parece razonable usar este complemento para editar la colección/matriz relacionada junto con el registro de la base de datos. ¿Alguien sabe una forma sencilla de agregar elementos a este editor de fila div?

O ... ¿tendré que hackear/extender el complemento para lograr esto?

Answer 1

A continuación se muestra el ejemplo de modificación del complemento RowEditing que permite agregar componentes adicionales. En esta demostración, este es solo un botón, pero debería ser fácil de personalizar.

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!' } 
     ] 
    } 
}); 

Aquí se muestra de trabajo: http://jsfiddle.net/e2DzY/1/