examples/grid/column-header-group.js

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