3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.onReady(function() {
\r
9 Asia: ['Beijing', 'Tokyo'],
\r
10 Europe: ['Berlin', 'London', 'Paris']
\r
12 products = ['ProductX', 'ProductY'],
\r
16 continentGroupRow = [],
\r
21 * Example method that generates:
\r
22 * 1) The column configuration for the grid
\r
23 * 2) The column grouping configuration
\r
24 * 3) The data for the store
\r
25 * 4) The fields for the store
\r
27 function generateConfig(){
\r
29 numProducts = products.length;
\r
31 Ext.iterate(structure, function(continent, cities){
\r
32 continentGroupRow.push({
\r
35 colspan: cities.length * numProducts
\r
37 Ext.each(cities, function(city){
\r
40 colspan: numProducts,
\r
43 Ext.each(products, function(product){
\r
46 name: city + product
\r
49 dataIndex: city + product,
\r
51 renderer: Ext.util.Format.usMoney
\r
55 for(var i = 0; i < 20; ++i){
\r
56 arr.push((Math.floor(Math.random()*11) + 1) * 100000);
\r
63 // Run method to generate columns, fields, row grouping
\r
68 * continentGroupRow at this point is:
\r
70 * {header: 'Asia', colspan: 4, align: 'center'},
\r
71 * {header: 'Europe', colspan: 6, align: 'center'}
\r
74 * cityGroupRow at this point is:
\r
76 * {header: 'Beijing', colspan: 2, align: 'center'},
\r
77 * {header: 'Tokyo', colspan: 2, align: 'center'},
\r
78 * {header: 'Berlin', colspan: 2, align: 'center'},
\r
79 * {header: 'London', colspan: 2, align: 'center'},
\r
80 * {header: 'Paris', colspan: 2, align: 'center'}
\r
83 var group = new Ext.ux.grid.ColumnHeaderGroup({
\r
84 rows: [continentGroupRow, cityGroupRow]
\r
88 * fields at this point is:
\r
90 * {type: 'int', name: 'BeijingProductX'},
\r
91 * {type: 'int', name: 'BeijingProductY'},
\r
92 * {type: 'int', name: 'TokyoProductX'},
\r
93 * {type: 'int', name: 'TokyoProductY'},
\r
94 * {type: 'int', name: 'BerlinProductX'},
\r
95 * {type: 'int', name: 'BerlinProductY'},
\r
96 * {type: 'int', name: 'LondonProductX'},
\r
97 * {type: 'int', name: 'LondonProductY'},
\r
98 * {type: 'int', name: 'ParisProductX'},
\r
99 * {type: 'int', name: 'ParisProductY'}
\r
102 * columns at this point is:
\r
104 * {dataIndex: 'BeijingProductX', header: 'ProductX'},
\r
105 * {dataIndex: 'BeijingProductY', header: 'ProductY'},
\r
106 * {dataIndex: 'TokyoProductX', header: 'ProductX'},
\r
107 * {dataIndex: 'TokyoProductY', header: 'ProductY'},
\r
108 * {dataIndex: 'BerlinProductX', header: 'ProductX'},
\r
109 * {dataIndex: 'BerlinProductY', header: 'ProductY'},
\r
110 * {dataIndex: 'LondonProductX', header: 'ProductX'},
\r
111 * {dataIndex: 'LondonProductY', header: 'ProductY'},
\r
112 * {dataIndex: 'ParisProductX', header: 'ProductX'},
\r
113 * {dataIndex: 'ParisProductY', header: 'ProductY'}
\r
116 var grid = new Ext.grid.GridPanel({
\r
117 renderTo: 'column-group-grid',
\r
118 title: 'Sales By Location',
\r
121 store: new Ext.data.ArrayStore({
\r