examples/pivotgrid/people.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * Multiple PivotGrid examples. Each PivotGrid shares a common Record and Store and simply presents
   9  * the data in a different way. For full details on using PivotGrid see the API documentation.
  10  */
  11 Ext.onReady(function() {
  12     var PersonRecord = Ext.data.Record.create([
  13         {name: 'eyeColor',    type: 'string'},
  14         {name: 'birthDecade', type: 'string'},
  15         {name: 'handedness',  type: 'string'},
  16         {name: 'gender',      type: 'string'},
  17         {name: 'height',      type: 'int'},
  18         {name: 'iq',          type: 'int'}
  19     ]);
  20
  21     var myStore = new Ext.data.Store({
  22         url: 'people.json',
  23         autoLoad: true,
  24         reader: new Ext.data.JsonReader({
  25             root: 'rows',
  26             idProperty: 'id'
  27         }, PersonRecord)
  28     });
  29
  30     var averageHeight = new Ext.grid.PivotGrid({
  31         title     : 'Average height',
  32         width     : 600,
  33         height    : 154,
  34         renderTo  : 'avgHeight',
  35         store     : myStore,
  36         aggregator: 'avg',
  37         measure   : 'height',
  38
  39         //turns a decimal number of feet into feet and inches
  40         renderer  : function(value) {
  41             var feet   = Math.floor(value),
  42                 inches = Math.round((value - feet) * 12);
  43
  44             return String.format("{0}' {1}\"", feet, inches);
  45         },
  46
  47         leftAxis: [
  48             {
  49                 width: 80,
  50                 dataIndex: 'birthDecade'
  51             }
  52         ],
  53
  54         topAxis: [
  55             {
  56                 dataIndex: 'gender'
  57             },
  58             {
  59                 dataIndex: 'handedness'
  60             }
  61         ]
  62     });
  63
  64     var perDecade = new Ext.grid.PivotGrid({
  65         title     : 'Number of people born per decade',
  66         width     : 600,
  67         height    : 91,
  68         renderTo  : 'perDecade',
  69         store     : myStore,
  70         aggregator: 'count',
  71
  72         topAxis: [
  73             {
  74                 width: 80,
  75                 dataIndex: 'birthDecade'
  76             }
  77         ],
  78
  79         leftAxis: [
  80             {
  81                 dataIndex: 'gender'
  82             }
  83         ]
  84     });
  85
  86     var maxIQ = new Ext.grid.PivotGrid({
  87         title     : 'Max IQ per decade',
  88         width     : 600,
  89         height    : 91,
  90         renderTo  : 'maxIQ',
  91         store     : myStore,
  92         measure   : 'iq',
  93         aggregator: 'max',
  94
  95         topAxis: [
  96             {
  97                 width: 80,
  98                 dataIndex: 'birthDecade'
  99             },
 100             {
 101                 dataIndex: 'handedness'
 102             }
 103         ]
 104     });
 105 });