-/*!
- * 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