Adding components to grid rowBody feature or rowExpander

[gr0uch0]

Is it possible to add panels etc to a grid's rowBody feature or rowExpander plugin? If so, how do I do it?
Ideally, I'd like the row expander to open up a sub-panel in the grid that shows a mini-tab panel with edit facilities.

All help more than welcome

I'm trying the following.

Ext.define('ARC.view.communicate.ContactList', {
    alias: 'widget.contactlist'
    ,extend: 'Ext.grid.Panel'
    ,requires: [
        'Ext.ux.RowExpander'
    ]
    ,plain: true
    ,loadMask: true
    ,verticalScroller: {xtype: 'paginggridscroller', activePrefetch: false}    
    ,viewConfig: {
        trackOver: false
        ,singleSelect: true
    }
/*    ,plugins: [{
         ptype: 'rowexpander'

        ,rowBodyTpl : [
            '<div id="ANDY"> </div>'
        ]

    }]
*/    
    ,features: [{ 
        ftype: 'rowbody'
        , getAdditionalData: function(data, idx, record, orig) { 
            return { rowBody:Ext.panel.Panel({title: 'TITLE', height: 200, width: 200})};
        }
    }, {     
      ftype: 'rowwrap'
       }]
    ......

I have also tried rendering a panel to the 'ANDY' div, created in the rowexpander template (commented out above), when the expandbody is fired

,onExpandBody: function(rowNode, record, expandRow) {
        console.log('rowNode',rowNode);
        console.log('record',record);
        console.log('expandRow',expandRow);
        var rowBody = Ext.get('ANDY');

        Ext.create({
            xtype: 'panel'
            ,title: 'title'
            ,height: 200
            ,width: 200
            ,renderTo: rowBody
        });
}

[gr0uch0]

And the answer is:

Ext.grid.Panel
.........
,plugins: [{
         ptype: 'rowexpander'
        ,rowBodyTpl : [
            '<div id="contact-row-{contactid}"> </div>'
        ]

    }]
.........

controller
 ,init: function() {
        this.control({
            'contactlist gridview'        :        {expandbody:        this.onExpandBody}
        })
    }

,onExpandBody: function(rowNode, record, expandRow) {        
        var row = 'contact-row-' + record.get('contactid');
        var andyPanel = Ext.create(Ext.panel.Panel,{
            ,title: 'title'
            ,height: 200
            ,width: 200
        });

        andyPanel.render(row);
}

[mysticav]

Hi,

This approach works but is not the best solution using ExtJS MVC.

Let me explain why:

When you render the component to a DOM element, the component cannot hierarchically be reached by Ext.ComponentQuery, because it is not a child of any component.

This means that you cannot find the component using ComponentQuery like this:

Ext.ComponentQuery.query('#mygrid #myAddedComponent');

You can only find it directly:

Ext.ComponentQuery.query('#myAddedComponent');

So far I haven't found a solution for this problem.

Maybe the solution would be to convert the

<div id="contact-row-{contactid}"> </div>

into a component and register it to the Ext.Component Manager.

I hope someone can help me with this problematic.

Thanks.