extjs/build/examples/kitchensink/classic/samples/view/pivot/Configurator.js

   1 /**
   2  *
   3  * This example shows how to create a pivot grid and let your end users
   4  * configure it.
   5  *
   6  */
   7 Ext.define('KitchenSink.view.pivot.Configurator', {
   8     extend: 'Ext.pivot.Grid',
   9     xtype: 'configurable-pivot-grid',
  10     controller: 'pivotconfig',
  11
  12     requires: [
  13         'KitchenSink.view.pivot.ConfiguratorController',
  14         'KitchenSink.store.pivot.Sales',
  15         'Ext.pivot.plugin.Configurator'
  16     ],
  17
  18     title: 'Pivot Grid with Configurator plugin',
  19     collapsible: true,
  20     multiSelect: true,
  21     height: 350,
  22
  23     store: {
  24         type: 'sales'
  25     },
  26     selModel: {
  27         type: 'spreadsheet'
  28     },
  29
  30     plugins: [{
  31         ptype:      'pivotconfigurator',
  32         pluginId:   'configurator',
  33         // It is possible to configure a list of fields that can be used to configure the pivot grid
  34         // If no fields list is supplied then all fields from the Store model are fetched automatically
  35         fields: [{
  36             dataIndex:  'country',
  37             header:     'Country'
  38         }, {
  39             dataIndex:  'quantity',
  40             header:     'Qty',
  41             // You can even provide a default aggregator function to be used when this field is dropped
  42             // on the agg dimensions
  43             aggregator: 'min'
  44         }, {
  45             dataIndex:  'month',
  46             header:     'Month',
  47             renderer: function(v, meta){
  48                 // This field can be dragged onto leftAxis or topAxis.
  49                 // When added to the topAxis the renderer is used to generate the column text, which
  50                 // means that only the value is passed to the function.
  51                 // When added to the leftAxis the renderer is called twice, once to generate the
  52                 // row labels and once by the grid panel so you can style the cell.
  53                 // To style an aggregated cell you need to add the renderer to the aggregate dimension.
  54                 return meta ? v : Ext.Date.monthNames[v];
  55             }
  56         }]
  57     }],
  58
  59     // Configure the aggregate dimensions. Multiple dimensions are supported.
  60     aggregate: [{
  61         dataIndex:  'value',
  62         header:     'Value',
  63         aggregator: 'avg'
  64     }],
  65
  66     // Configure the left axis dimensions that will be used to generate the grid rows
  67     leftAxis: [{
  68         dataIndex:  'person',
  69         header:     'Person'
  70     },{
  71         dataIndex:  'company',
  72         header:     'Company',
  73         sortable:   false
  74     }],
  75
  76     /**
  77      * Configure the top axis dimensions that will be used to generate the columns.
  78      * When columns are generated the aggregate dimensions are also used. If multiple aggregation dimensions
  79      * are defined then each top axis result will have in the end a column header with children
  80      * columns for each aggregate dimension defined.
  81      */
  82     topAxis: [{
  83         dataIndex:  'year',
  84         header:     'Year'
  85     }],
  86
  87     header: {
  88         itemPosition: 1, // after title before collapse tool
  89         items: [{
  90             ui: 'default-toolbar',
  91             xtype: 'button',
  92             text: 'Dock',
  93             menu: {
  94                 defaults: {
  95                     xtype: 'menucheckitem',
  96                     group:  'docking',
  97                     checkHandler: 'changeDock'
  98                 },
  99                 items: [{
 100                     text: 'Top'
 101                 },{
 102                     text: 'Right',
 103                     checked: true
 104                 },{
 105                     text: 'Bottom'
 106                 },{
 107                     text: 'Left'
 108                 }]
 109             }
 110         }]
 111     },
 112
 113     //<example>
 114     otherContent: [{
 115         type: 'Controller',
 116         path: 'classic/samples/view/pivot/ConfiguratorController.js'
 117     },{
 118         type: 'Model',
 119         path: 'classic/samples/model/pivot/Sale.js'
 120     },{
 121         type: 'Store',
 122         path: 'classic/samples/store/pivot/Sales.js'
 123     }],
 124     profiles: {
 125         classic: {
 126             width: 600
 127         },
 128         neptune: {
 129             width: 750
 130         }
 131     },
 132     //</example>
 133
 134     initComponent: function () {
 135         var me = this;
 136
 137         me.width = me.profileInfo.width;
 138
 139         me.callParent();
 140     }
 141 });