examples/pivotgrid/reconfigurable.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.ns('pivot');
   8
   9 Ext.onReady(function() {
  10     var SaleRecord = Ext.data.Record.create([
  11         {name: 'person',   type: 'string'},
  12         {name: 'product',  type: 'string'},
  13         {name: 'city',     type: 'string'},
  14         {name: 'state',    type: 'string'},
  15         {name: 'month',    type: 'int'},
  16         {name: 'quarter',  type: 'int'},
  17         {name: 'year',     type: 'int'},
  18         {name: 'quantity', type: 'int'},
  19         {name: 'value',    type: 'int'}
  20     ]);
  21
  22     var myStore = new Ext.data.Store({
  23         url: 'data.json',
  24         autoLoad: true,
  25         reader: new Ext.data.JsonReader({
  26             root: 'rows',
  27             idProperty: 'id'
  28         }, SaleRecord)
  29     });
  30
  31     var pivotGrid = new Ext.grid.PivotGrid({
  32         store     : myStore,
  33         aggregator: 'sum',
  34         measure   : 'value',
  35         leftAxis: [{
  36             width: 60,
  37             dataIndex: 'product'
  38         }, {
  39             width: 80,
  40             dataIndex: 'city'
  41         }, {
  42             width: 120,
  43             dataIndex: 'person'
  44         }],
  45         topAxis: [{
  46             dataIndex: 'year'
  47         }, {
  48             dataIndex: 'quarter'
  49         }],
  50         region: 'center',
  51         margins: '5 5 5 0',
  52     });
  53
  54     var configPanel = new pivot.ConfigPanel({
  55         width : 300,
  56         margins: '5 5 5 5',
  57         region: 'west',
  58         record: SaleRecord,
  59         measures: ['value', 'quantity'],
  60         aggregator: 'sum',
  61
  62         leftAxisDimensions: [
  63             {field: 'product', width: 60,  direction: 'ASC'},
  64             {field: 'city',    width: 80,  direction: 'ASC'},
  65             {field: 'person',  width: 120, direction: 'ASC'}
  66         ],
  67
  68         topAxisDimensions: [
  69             {field: 'year',    direction: 'ASC'},
  70             {field: 'quarter', direction: 'ASC'}
  71         ],
  72
  73         listeners: {
  74             update: function(config) {
  75                 pivotGrid.leftAxis.setDimensions(config.leftDimensions);
  76                 pivotGrid.topAxis.setDimensions(config.topDimensions);
  77
  78                 pivotGrid.setMeasure(config.measure);
  79                 pivotGrid.setAggregator(config.aggregator);
  80
  81                 pivotGrid.view.refresh(true);
  82             }
  83         }
  84     });
  85
  86     var viewport = new Ext.Viewport({
  87         layout: 'fit',
  88         items: {
  89             border: false,
  90             title : 'Ext JS Pivot Grid',
  91             layout: 'border',
  92             items : [
  93                 configPanel,
  94                 pivotGrid
  95             ]
  96         }
  97     });
  98 });