ExtJS estendere il plug-in RowEditor della griglia (per modificare l'array)

Question

Ho utilizzato il ExtJS grid row editing plugin in modo generoso per le operazioni CRUD nelle applicazioni Web. Ora, ho il requisito di consentire la modifica di un record del database insieme a una collezione/array correlata (da un altro datastore) usando questo plugin per modificare le righe.

Per fare ciò, voglio inserire delle griglie drag-n-drop all'interno di una riga che è stata selezionata per la modifica, una griglia che mostra gli elementi di raccolta (inutilizzati) disponibili a sinistra e un'altra griglia per contenere gli elementi di raccolta definiti sulla destra.

Per illustrare quello che sto cercando di fare, qui è la normale plug-editing fila con una riga selezionata per la modifica:

che sto cercando di fare questo (griglie di drag-n-drop all'interno di editor di fila div):

per fare questo ho cercato di eseguire semplicemente qualcosa come Ext.getCmp(???).add(myDnDGridPanel); ma non ho trovato la cosa giusta da collegare questo a (cosa mettere nei punti interrogativi).

Sembra abbastanza ragionevole utilizzare questo plug-in per modificare la raccolta/matrice correlata insieme al record del database. Qualcuno sa un modo semplice per aggiungere elementi a questo editor di riga div?

Oppure ... dovrò hackerare/estendere il plugin per realizzare questo?

Answer 1

Di seguito è riportato l'esempio di modifica del plug-in RowEditing che consente di aggiungere componenti aggiuntivi. In questa demo questo è solo un pulsante, ma dovrebbe essere facile da personalizzare.

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

Qui sta lavorando campione: http://jsfiddle.net/e2DzY/1/