how to group header grid in extjs?

Question

How to group header like grid below in extjs:

|-------------- A1 header------------|--------------B1 Header---------------|

|----A2Header---|---A3Header---|----B2Header---|---B3Header------|

|-----A2Data------|----A3 Data------|-----B2 Data------|-----B3 Data-------|

|-----A2Data------|----A3 Data------|-----B2 Data------|-----B3 Data-------|

my code extjs:

    plColModel = new Ext.grid.ColumnModel([

    new Ext.grid.RowNumberer(),
    { header: "A2Header", dataIndex: 'A2Data' },
    { header: "A3Header", dataIndex: 'A3Data' },
    { header: "B2Header", dataIndex: 'B2Data' },
    { header: "B3Header", dataIndex: 'B3Data' }
        ]);

Answer 1

I remember how I've spend a lot of time trying to understand the code in the example Sencha provided for ColumnHeaderGroup. I've made a 6-level column group header several days ago and it is not that difficult.

Put all of your column headers in an object as object keys for the following headers. Last headers' followers will be the columns' properties:

var chstructure = {
    'A1 header' : {
        'A2Header' : {'A2Data' : {'A2Data' : {'dataIndex' : 'A2', 'width' : 100}}},
        'A3Header' : {'A3Data' : {'A3Data' : {'dataIndex' : 'A3', 'width' : 100}}}
    },
    'B1 header' : {
        'B2Header' : {'B2Data' : {'B2Data' : {'dataIndex' : 'B2', 'width' : 100}}},
        'B3Header' : {'B3Data' : {'B3Data' : {'dataIndex' : 'B3', 'width' : 100}}}
    }
};

You'll need some arrays to put the headers in: these arrays will be the rows in your column header group. You'll also need a fields array: it will contain the fields for your store. Don't forget to initialize some colspan variables (I'll name them len n ) that will keep count of the colspan for each column header (in this example 'A1 header' has 2 children and 'A2Header' has only 1), and some width variables (wid n ), for each header's width.

var Row1contents = [], Row2contents = [], Row3contents = [], Row4contents = [];
var len1 = 0, len2 = 0, len3=0, wid1 = 0, wid2 = 0, wid3 = 0;
var fields = [];

Now you may finally parse chstructure in order to retrieve the column headers. Use Ext.iterate for that:

Ext.iterate (chstructure, function(Row1, Row1structure){
    Ext.iterate (Row1structure, function(Row2, Row2structure){
        Ext.iterate (Row2structure, function(Row3, Row3structure){
            Ext.iterate (Row3contents, function(Row4, Row4structure){
                len1++;len2++;len3++;
                wid1+=Row4structure['width'];
                wid2+=Row4structure['width'];
                wid3+=Row4structure['width'];
                Row4contents.push({
                    dataIndex: Row4structure['dataIndex'],
                    header: Row4,
                    width: Row4structure['width']
                });
                fields.push({
                    type: 'int', // may be 'string'
                    name: Row4structure['dataIndex']
                });
            });
            Row3contents.push({
                header: Row3,
                width: wid3,
                colspan: len3
            });
            len3=wid3=0;
        });
        Row2contents.push({
            header: Row2,
            width: wid2,
            colspan: len2
        });
        len2=wid2=0;
    });
    Row1contents.push({
        header: Row1,
        width: wid1,
        colspan: len1
    });
    len1=wid1=0;
});

View the 4 arrays in your console and ensure they contain all data you set. The last step is to configure the grid width the ColumnHeaderGroup plugin. Use property

plugins: [new Ext.ux.grid.ColumnHeaderGroup({
    rows: [Row1Group, Row2Group, Row3Group]
});

Set columns : Row4contents for your grid and fields : fields for your grid's store.

Happy coding!