examples/grid/column-header-group.js

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