X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..6e39d509471fe9b4e2660e0d1631b350d0c66f40:/examples/grid/column-header-group.js

diff --git a/examples/grid/column-header-group.js b/examples/grid/column-header-group.js
new file mode 100644
index 00000000..9f5075d6
--- /dev/null
+++ b/examples/grid/column-header-group.js
@@ -0,0 +1,131 @@
+/*!
+ * Ext JS Library 3.1.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function() {
+    var structure = {
+        Asia: ['Beijing', 'Tokyo'],
+        Europe: ['Berlin', 'London', 'Paris']
+    },
+    products = ['ProductX', 'ProductY'],
+    fields = [],
+    columns = [],
+    data = [],
+    continentGroupRow = [],
+    cityGroupRow = [];
+    
+        
+    /*
+     * Example method that generates:
+     * 1) The column configuration for the grid
+     * 2) The column grouping configuration
+     * 3) The data for the store
+     * 4) The fields for the store
+     */
+    function generateConfig(){
+        var arr,
+            numProducts = products.length;
+            
+        Ext.iterate(structure, function(continent, cities){
+            continentGroupRow.push({
+                header: continent,
+                align: 'center',
+                colspan: cities.length * numProducts
+            });
+            Ext.each(cities, function(city){
+                cityGroupRow.push({
+                    header: city,
+                    colspan: numProducts,
+                    align: 'center'
+                });
+                Ext.each(products, function(product){
+                    fields.push({
+                        type: 'int',
+                        name: city + product
+                    });
+                    columns.push({
+                        dataIndex: city + product,
+                        header: product,
+                        renderer: Ext.util.Format.usMoney
+                    });
+                });
+                arr = [];
+                for(var i = 0; i < 20; ++i){
+                    arr.push((Math.floor(Math.random()*11) + 1) * 100000);
+                }
+                data.push(arr);
+            });
+        })
+    }
+    
+    // Run method to generate columns, fields, row grouping
+    generateConfig();
+    
+    
+    /*
+     * continentGroupRow at this point is:
+     * [
+     *     {header: 'Asia', colspan: 4, align: 'center'},
+     *     {header: 'Europe', colspan: 6, align: 'center'}
+     * ]
+     * 
+     * cityGroupRow at this point is:
+     * [
+     *     {header: 'Beijing', colspan: 2, align: 'center'},
+     *     {header: 'Tokyo', colspan: 2, align: 'center'},
+     *     {header: 'Berlin', colspan: 2, align: 'center'},
+     *     {header: 'London', colspan: 2, align: 'center'},
+     *     {header: 'Paris', colspan: 2, align: 'center'}
+     * ]
+     */
+    var group = new Ext.ux.grid.ColumnHeaderGroup({
+        rows: [continentGroupRow, cityGroupRow]
+    });
+    
+    /*
+     * fields at this point is:
+     * [
+     *     {type: 'int', name: 'BeijingProductX'},
+     *     {type: 'int', name: 'BeijingProductY'},
+     *     {type: 'int', name: 'TokyoProductX'},
+     *     {type: 'int', name: 'TokyoProductY'},
+     *     {type: 'int', name: 'BerlinProductX'},
+     *     {type: 'int', name: 'BerlinProductY'},
+     *     {type: 'int', name: 'LondonProductX'},
+     *     {type: 'int', name: 'LondonProductY'},
+     *     {type: 'int', name: 'ParisProductX'},
+     *     {type: 'int', name: 'ParisProductY'}
+     * ]
+     * 
+     * columns at this point is:
+     * [
+     *     {dataIndex: 'BeijingProductX', header: 'ProductX'},
+     *     {dataIndex: 'BeijingProductY', header: 'ProductY'},
+     *     {dataIndex: 'TokyoProductX', header: 'ProductX'},
+     *     {dataIndex: 'TokyoProductY', header: 'ProductY'},
+     *     {dataIndex: 'BerlinProductX', header: 'ProductX'},
+     *     {dataIndex: 'BerlinProductY', header: 'ProductY'},
+     *     {dataIndex: 'LondonProductX', header: 'ProductX'},
+     *     {dataIndex: 'LondonProductY', header: 'ProductY'},
+     *     {dataIndex: 'ParisProductX', header: 'ProductX'},
+     *     {dataIndex: 'ParisProductY', header: 'ProductY'}
+     * ]
+     */
+    var grid = new Ext.grid.GridPanel({
+        renderTo: 'column-group-grid',
+        title: 'Sales By Location',
+        width: 1000,
+        height: 400,
+        store: new Ext.data.ArrayStore({
+            fields: fields,
+            data: data
+        }),
+        columns: columns,
+        viewConfig: {
+            forceFit: true
+        },
+        plugins: group
+    });
+});
\ No newline at end of file