Question

I wan’t to add an ext panel instead of html in ext grid panel. What I have right now is this:

features: [{
    ftype: 'rowbody',
    getAdditionalData: function (data, rowIndex, record, orig) {
        var headerCt = this.view.headerCt,
            colspan = headerCt.getColumnCount();
        // Usually you would style the my-body-class in CSS file
        return {
            rowBody: '<div style="padding: 1em">' + record.get("description") + '</div>',
            rowBodyCls: "my-body-class",
            rowBodyColspan: colspan
        };
    }
}],

But instead of rowBody I will like to include an standard panel that so I could add buttons and other layout.

It’s that posible?

Answer 1

So this is what I did to replace the rowBody with a custom panel

In my view I create this:

plugins: [{
    ptype: 'rowexpander',
    rowBodyTpl : ['<div id="group-row-{groupId}"> </div>']
}]

In my controller I added a expandbody listener like this:

 'myList grid[itemid = usergroupsList]' : {
    select: this.onSelect,
    expandbody: this.onExpandBody
 }

and the onExpandBody

onExpandBody: function(rowNode, record, expandRow) {                
    var row = 'group-row-' + record.get('groupId');
    var elem = document.getElementById(row);
    elem.innerHTML = '';
    var innerPanel = Ext.widget('panel',{                
        html: '<p>'+record.get('description')+'</p>',
        height: 100,
        flex: 1,
        border:0
        }]
    });
    innerPanel.render(row);

Instead of creating the panel each time you can use xTemplate of define a component to render to this id.