examples/pivotgrid/countries.js

   1 /*!
   2  * Ext JS Library 3.3.0
   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 myStore = new Ext.data.ArrayStore({
   9         autoLoad: true,
  10         fields: [
  11             'economy', 'region', 'year',
  12             {name: 'procedures', type: 'int'},
  13             {name: 'time',       type: 'int'}
  14         ],
  15         url   : 'countries.json'
  16     });
  17
  18     var pivotGrid = new Ext.grid.PivotGrid({
  19         title     : 'Ease of doing business',
  20         width     : 800,
  21         height    : 400,
  22         renderTo  : 'docbody',
  23         store     : myStore,
  24         aggregator: 'sum',
  25         measure   : 'time',
  26
  27         viewConfig: {
  28             getCellCls: function(value) {
  29                 if (value < 20) {
  30                     return 'expense-low';
  31                 } else if (value < 75) {
  32                     return 'expense-medium';
  33                 } else {
  34                     return 'expense-high';
  35                 }
  36             }
  37         },
  38
  39         leftAxis: [
  40             {
  41                 width: 165,
  42                 dataIndex: 'economy'
  43             }
  44         ],
  45
  46         topAxis: [
  47             {
  48                 dataIndex: 'year'
  49             }
  50         ],
  51
  52         //toggles the Region dimension on and off
  53         tbar: [
  54             {
  55                 text: 'Toggle Region',
  56                 enableToggle: true,
  57                 toggleHandler: function() {
  58                     var leftAxis      = pivotGrid.leftAxis,
  59                         oldDimensions = leftAxis.dimensions,
  60                         newDimensions = [];
  61
  62                     if (oldDimensions.length == 1) {
  63                         newDimensions.push({
  64                             width: 100,
  65                             dataIndex: 'region'
  66                         });
  67                     }
  68
  69                     newDimensions.push({
  70                         width: 165,
  71                         dataIndex: 'economy'
  72                     });
  73
  74                     leftAxis.setDimensions(newDimensions);
  75                     pivotGrid.view.refresh(true);
  76                 }
  77             }
  78         ]
  79     });
  80 });