Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / grid / column-header-group.js
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 Ext.onReady(function() {
8     var structure = {
9         Asia: ['Beijing', 'Tokyo'],
10         Europe: ['Berlin', 'London', 'Paris']
11     },
12     products = ['ProductX', 'ProductY'],
13     fields = [],
14     columns = [],
15     data = [],
16     continentGroupRow = [],
17     cityGroupRow = [];
18     
19         
20     /*
21      * Example method that generates:
22      * 1) The column configuration for the grid
23      * 2) The column grouping configuration
24      * 3) The data for the store
25      * 4) The fields for the store
26      */
27     function generateConfig(){
28         var arr,
29             numProducts = products.length;
30             
31         Ext.iterate(structure, function(continent, cities){
32             continentGroupRow.push({
33                 header: continent,
34                 align: 'center',
35                 colspan: cities.length * numProducts
36             });
37             Ext.each(cities, function(city){
38                 cityGroupRow.push({
39                     header: city,
40                     colspan: numProducts,
41                     align: 'center'
42                 });
43                 Ext.each(products, function(product){
44                     fields.push({
45                         type: 'int',
46                         name: city + product
47                     });
48                     columns.push({
49                         dataIndex: city + product,
50                         header: product,
51                         renderer: Ext.util.Format.usMoney
52                     });
53                 });
54                 arr = [];
55                 for(var i = 0; i < 20; ++i){
56                     arr.push((Math.floor(Math.random()*11) + 1) * 100000);
57                 }
58                 data.push(arr);
59             });
60         })
61     }
62     
63     // Run method to generate columns, fields, row grouping
64     generateConfig();
65     
66     
67     /*
68      * continentGroupRow at this point is:
69      * [
70      *     {header: 'Asia', colspan: 4, align: 'center'},
71      *     {header: 'Europe', colspan: 6, align: 'center'}
72      * ]
73      * 
74      * cityGroupRow at this point is:
75      * [
76      *     {header: 'Beijing', colspan: 2, align: 'center'},
77      *     {header: 'Tokyo', colspan: 2, align: 'center'},
78      *     {header: 'Berlin', colspan: 2, align: 'center'},
79      *     {header: 'London', colspan: 2, align: 'center'},
80      *     {header: 'Paris', colspan: 2, align: 'center'}
81      * ]
82      */
83     var group = new Ext.ux.grid.ColumnHeaderGroup({
84         rows: [continentGroupRow, cityGroupRow]
85     });
86     
87     /*
88      * fields at this point is:
89      * [
90      *     {type: 'int', name: 'BeijingProductX'},
91      *     {type: 'int', name: 'BeijingProductY'},
92      *     {type: 'int', name: 'TokyoProductX'},
93      *     {type: 'int', name: 'TokyoProductY'},
94      *     {type: 'int', name: 'BerlinProductX'},
95      *     {type: 'int', name: 'BerlinProductY'},
96      *     {type: 'int', name: 'LondonProductX'},
97      *     {type: 'int', name: 'LondonProductY'},
98      *     {type: 'int', name: 'ParisProductX'},
99      *     {type: 'int', name: 'ParisProductY'}
100      * ]
101      * 
102      * columns at this point is:
103      * [
104      *     {dataIndex: 'BeijingProductX', header: 'ProductX'},
105      *     {dataIndex: 'BeijingProductY', header: 'ProductY'},
106      *     {dataIndex: 'TokyoProductX', header: 'ProductX'},
107      *     {dataIndex: 'TokyoProductY', header: 'ProductY'},
108      *     {dataIndex: 'BerlinProductX', header: 'ProductX'},
109      *     {dataIndex: 'BerlinProductY', header: 'ProductY'},
110      *     {dataIndex: 'LondonProductX', header: 'ProductX'},
111      *     {dataIndex: 'LondonProductY', header: 'ProductY'},
112      *     {dataIndex: 'ParisProductX', header: 'ProductX'},
113      *     {dataIndex: 'ParisProductY', header: 'ProductY'}
114      * ]
115      */
116     var grid = new Ext.grid.GridPanel({
117         renderTo: 'column-group-grid',
118         title: 'Sales By Location',
119         width: 1000,
120         height: 400,
121         store: new Ext.data.ArrayStore({
122             fields: fields,
123             data: data
124         }),
125         columns: columns,
126         viewConfig: {
127             forceFit: true
128         },
129         plugins: group
130     });
131 });