ExtJSグリッドのRowEditorプラグイン（配列を編集する）

Question

私は、WebアプリケーションのCRUD操作にかなり好都合に使用してきました（ExtJS grid row editing plugin）。今、私は、この行編集プラグインを使用して関連するコレクション/配列（別のデータストアから）とともにデータベースレコードを編集できるようにする必要があります。

これを行うには、編集用に選択された行の内側にドラッグアンドドロップグリッドを挿入したい、左側に使用可能な（未使用の）コレクションアイテムを表示するグリッドと、定義されたコレクションアイテムを保持する別のグリッド右側に。

私がやろうとしています何を説明するためには、ここでの編集のために選択された行と、通常の行編集プラグインです：

私は内部のこの（ドラッグ＆ドロップグリッドをやろうとしています

私は単にExt.getCmp(???).add(myDnDGridPanel);ような何かを実行しようとしているが、私は置くために何を（にこれを取り付けるための正しいことを発見していないこれを行うには：）行エディタのdivの疑問符で）。

データベースレコードと共に関連するコレクション/配列を編集するには、このプラグインを使用するだけで十分です。誰もこの行エディタdivに項目を追加する簡単な方法を知っていますか？

または...これを達成するためにプラグインをハック/拡張する必要がありますか？

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/