/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* 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
+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
git.ithinksw.org / extjs.git / blobdiff