Geek Answers Handbook

How to group header grid in extjs?

How to group the header like the grid below in extjs:

| -------------- Header A1 ------------ | ---------- ---- - Heading B1 --------------- |

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

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

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

my extjs code is:

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' } ]);
+4
source share
3 answers

refer to this:

ColumnHeaderGroup

+2
source

I remember how I spent a lot of time trying to understand the code in the Sencha example for ColumnHeaderGroup. A few days ago, I created a group heading with 6 levels, and it’s not so difficult.

Place all column headings in the object as object keys for the following headings. The last header subscribers will be the column 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 will need some arrays to place the headers: these arrays will be the rows in the column header group. You will also need an array of fields: it will contain the fields for your store. Remember to initialize some colspan variables (I will call them len n) that will contain the colspan count for each column heading (in this example, 'A1 header' has 2 children and 'A2Header' only 1), and some width width (wid n) for each header width.

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

Now you can finally parse the chstructure to get the column headers. Use Ext.iterate for this:

 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; });

Browse through the 4 arrays on the console and make sure that they contain all the data you set. The final step is to adjust the grid width of 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 storage.

Happy coding!

+3
source

More articles:


All Articles