ExtJS ग्रिड RowEditor प्लगइन (सरणी संपादित करने के लिए) का विस्तार करें

Question

मैं वेब अनुप्रयोगों में CRUD संचालन के लिए ExtJS grid row editing plugin बहुत उदारतापूर्वक उपयोग कर रहा हूं। अब, मुझे इस पंक्ति संपादन प्लगइन का उपयोग कर संबंधित संग्रह/सरणी (किसी अन्य डेटास्टोर से) के साथ डेटाबेस रिकॉर्ड को संपादित करने की आवश्यकता है।

ऐसा करने के लिए मैं एक पंक्ति के अंदर ड्रैग-एन-ड्रॉप ग्रिड डालना चाहता हूं जिसे संपादन के लिए चुना गया है, एक ग्रिड बाईं ओर उपलब्ध (अप्रयुक्त) संग्रह आइटम दिखा रहा है और परिभाषित संग्रह आइटम रखने के लिए एक और ग्रिड दायीं तरफ।

इसे समझने के लिए मुझे क्या करना कोशिश कर रहा हूँ, यहाँ एक पंक्ति संपादन के लिए चयनित के साथ सामान्य पंक्ति संपादन प्लगइन है:

मैं अंदर इस (खींचें n ड्रॉप ग्रिड करने के लिए कोशिश कर रहा हूँ पंक्ति संपादक div) का:

इस मैं बस Ext.getCmp(???).add(myDnDGridPanel); की तरह कुछ चलाने के लिए कोशिश कर रहे हैं ऐसा करने के लिए, लेकिन मैं करने के लिए इस संलग्न करने के लिए सही काम नहीं मिला है (क्या डाल करने के लिए प्रश्न चिह्न में)।

डेटाबेस रिकॉर्ड के साथ संबंधित संग्रह/सरणी को संपादित करने के लिए इस प्लगइन का उपयोग करने के लिए पर्याप्त उचित लगता है। क्या किसी को इस पंक्ति संपादक 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/