Upgrade to ExtJS 3.1.0 - Released 12/16/2009

[extjs.git] / 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 (file)
index 0000000..9f5075d
--- /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() {\r
+    var structure = {\r
+        Asia: ['Beijing', 'Tokyo'],\r
+        Europe: ['Berlin', 'London', 'Paris']\r
+    },\r
+    products = ['ProductX', 'ProductY'],\r
+    fields = [],\r
+    columns = [],\r
+    data = [],\r
+    continentGroupRow = [],\r
+    cityGroupRow = [];\r
+    \r
+        \r
+    /*\r
+     * Example method that generates:\r
+     * 1) The column configuration for the grid\r
+     * 2) The column grouping configuration\r
+     * 3) The data for the store\r
+     * 4) The fields for the store\r
+     */\r
+    function generateConfig(){\r
+        var arr,\r
+            numProducts = products.length;\r
+            \r
+        Ext.iterate(structure, function(continent, cities){\r
+            continentGroupRow.push({\r
+                header: continent,\r
+                align: 'center',\r
+                colspan: cities.length * numProducts\r
+            });\r
+            Ext.each(cities, function(city){\r
+                cityGroupRow.push({\r
+                    header: city,\r
+                    colspan: numProducts,\r
+                    align: 'center'\r
+                });\r
+                Ext.each(products, function(product){\r
+                    fields.push({\r
+                        type: 'int',\r
+                        name: city + product\r
+                    });\r
+                    columns.push({\r
+                        dataIndex: city + product,\r
+                        header: product,\r
+                        renderer: Ext.util.Format.usMoney\r
+                    });\r
+                });\r
+                arr = [];\r
+                for(var i = 0; i < 20; ++i){\r
+                    arr.push((Math.floor(Math.random()*11) + 1) * 100000);\r
+                }\r
+                data.push(arr);\r
+            });\r
+        })\r
+    }\r
+    \r
+    // Run method to generate columns, fields, row grouping\r
+    generateConfig();\r
+    \r
+    \r
+    /*\r
+     * continentGroupRow at this point is:\r
+     * [\r
+     *     {header: 'Asia', colspan: 4, align: 'center'},\r
+     *     {header: 'Europe', colspan: 6, align: 'center'}\r
+     * ]\r
+     * \r
+     * cityGroupRow at this point is:\r
+     * [\r
+     *     {header: 'Beijing', colspan: 2, align: 'center'},\r
+     *     {header: 'Tokyo', colspan: 2, align: 'center'},\r
+     *     {header: 'Berlin', colspan: 2, align: 'center'},\r
+     *     {header: 'London', colspan: 2, align: 'center'},\r
+     *     {header: 'Paris', colspan: 2, align: 'center'}\r
+     * ]\r
+     */\r
+    var group = new Ext.ux.grid.ColumnHeaderGroup({\r
+        rows: [continentGroupRow, cityGroupRow]\r
+    });\r
+    \r
+    /*\r
+     * fields at this point is:\r
+     * [\r
+     *     {type: 'int', name: 'BeijingProductX'},\r
+     *     {type: 'int', name: 'BeijingProductY'},\r
+     *     {type: 'int', name: 'TokyoProductX'},\r
+     *     {type: 'int', name: 'TokyoProductY'},\r
+     *     {type: 'int', name: 'BerlinProductX'},\r
+     *     {type: 'int', name: 'BerlinProductY'},\r
+     *     {type: 'int', name: 'LondonProductX'},\r
+     *     {type: 'int', name: 'LondonProductY'},\r
+     *     {type: 'int', name: 'ParisProductX'},\r
+     *     {type: 'int', name: 'ParisProductY'}\r
+     * ]\r
+     * \r
+     * columns at this point is:\r
+     * [\r
+     *     {dataIndex: 'BeijingProductX', header: 'ProductX'},\r
+     *     {dataIndex: 'BeijingProductY', header: 'ProductY'},\r
+     *     {dataIndex: 'TokyoProductX', header: 'ProductX'},\r
+     *     {dataIndex: 'TokyoProductY', header: 'ProductY'},\r
+     *     {dataIndex: 'BerlinProductX', header: 'ProductX'},\r
+     *     {dataIndex: 'BerlinProductY', header: 'ProductY'},\r
+     *     {dataIndex: 'LondonProductX', header: 'ProductX'},\r
+     *     {dataIndex: 'LondonProductY', header: 'ProductY'},\r
+     *     {dataIndex: 'ParisProductX', header: 'ProductX'},\r
+     *     {dataIndex: 'ParisProductY', header: 'ProductY'}\r
+     * ]\r
+     */\r
+    var grid = new Ext.grid.GridPanel({\r
+        renderTo: 'column-group-grid',\r
+        title: 'Sales By Location',\r
+        width: 1000,\r
+        height: 400,\r
+        store: new Ext.data.ArrayStore({\r
+            fields: fields,\r
+            data: data\r
+        }),\r
+        columns: columns,\r
+        viewConfig: {\r
+            forceFit: true\r
+        },\r
+        plugins: group\r
+    });\r
+});
\ No newline at end of file