ExtJS Grid Panel - Multiple "rows" per row?

Question

We have an ExtJS Grid Panel that has grown to include too many columns (imo), so I am looking into enfolding some data into "sub-rows" of the main row. Like:

I am aware of the expander plugin, but we wouldn't need the expand/collapse functionality and always need the sub-rows open.

Any thoughts or ideas?

Thanks in advance.

score 17 · Accepted Answer · answered Jun 06 '11 at 05:57

If you're using ExtJS-4,

// ...
var rowBodyFeature = Ext.create('Ext.grid.feature.RowBody', {
    getAdditionalData: function(data, rowIndex, record, orig) {
        var headerCt = this.view.headerCt,
        colspan  = headerCt.getColumnCount();
        return {
            rowBody: "HELLO WORLD!", // do something with record
            rowBodyCls: this.rowBodyCls,
            rowBodyColspan: colspan
        };
    }
});

Ext.create('Ext.grid.Panel', {
    // ...
    features: [rowBodyFeature]
    // ...
});

If using ExtJS-3, try:

new Ext.grid.GridPanel({
    //...
    viewConfig: {
        enableRowBody: true,
        getRowClass: function(record, rowIndex, p, store) {
            p.body = 'HELLOW WORLD: ' + record.get('attribute');
            return 'x-grid3-row-expanded';
        }
    }

You can find further documentation, including examples, [here (ExtJS 4.2.1)](http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.feature.RowBody) — Kevin Cooper, Jun 24 '13 at 17:16

score 0 · Answer 2 · answered May 23 '11 at 23:30

0

What you need to do is implement a nested grid using the expander plugin. On the click or expand event, you can use your row's ID as a key to load the sub-rows.

answered May 23 '11 at 23:30

It Grunt

3,300
3
21
35

ExtJS Grid Panel - Multiple "rows" per row?

2 Answers2