extjs/examples/kitchensink/modern/src/view/grid/BigData.js

   1 Ext.define('KitchenSink.view.grid.BigData', {
   2     extend: 'Ext.grid.Grid',
   3     requires: [
   4         'Ext.grid.plugin.Editable',
   5         'Ext.grid.plugin.ViewOptions',
   6         'Ext.grid.plugin.PagingToolbar',
   7         'Ext.grid.plugin.SummaryRow',
   8         'Ext.grid.plugin.ColumnResizing',
   9         'Ext.grid.plugin.MultiSelection',
  10         'KitchenSink.view.grid.BigDataRowModel',
  11         'KitchenSink.view.grid.BigDataController'
  12     ],
  13
  14     controller: 'grid-bigdata',
  15
  16     grouped: true,
  17     store: {
  18         model: 'Contact',
  19         autoLoad: true,
  20         groupField: 'company',
  21         proxy: {
  22             type: 'ajax',
  23             url: 'data/bigdata.json',
  24             reader: {
  25                 rootProperty: 'results'
  26             }
  27         }
  28     },
  29
  30     plugins: [{
  31         type: 'grideditable'
  32     }, {
  33         type: 'gridviewoptions'
  34     }, {
  35         type: 'gridpagingtoolbar'
  36     }, {
  37         type: 'gridsummaryrow'
  38     }, {
  39         type: 'gridcolumnresizing'
  40     }],
  41
  42     // Instruct rows to create view models so we can use data binding
  43     itemConfig: {
  44         viewModel: {
  45             type: 'grid-bigdata-row'
  46         }
  47     },
  48
  49     columns: [{
  50         text: 'Name',
  51         dataIndex: 'fullName',
  52         flex: 1,
  53         minWidth: 100,
  54         editable: true,
  55         summaryType: 'count',
  56         summaryRenderer: 'nameSummaryRenderer'
  57     }, {
  58         text: 'Identifiers',
  59         xtype: 'gridheadergroup',
  60         columns: [{
  61             text: 'Email',
  62             dataIndex: 'email',
  63             width: 300,
  64             editable: true,
  65             editor: {
  66                 xtype: 'emailfield'
  67             }
  68         }, {
  69             text: 'Id',
  70             dataIndex: 'guid',
  71             width: 100
  72         }, {
  73             text: '',
  74             width: 200,
  75             cell: {
  76                 xtype: 'widgetcell',
  77                 widget: {
  78                     xtype: 'button',
  79                     ui: 'action',
  80                     bind: 'Verify {record.firstName}',
  81                     handler: 'onVerifyTap'
  82                 }
  83             }
  84         }]
  85     }, {
  86         text: 'Miscellaneous',
  87         xtype: 'gridheadergroup',
  88         columns: [{
  89             text: 'Age',
  90             tpl: '{age} years',
  91             align: 'center',
  92             width: 110,
  93             dataIndex: 'age',
  94             summaryType: 'average',
  95             cell: {
  96                 bind: {
  97                     innerCls: '{ageGroup:pick("under25","under30","under35","over35")}'
  98                 }
  99             },
 100
 101             summaryRenderer: 'ageSummaryRenderer'
 102         }, {
 103             text: 'Gender',
 104             dataIndex: 'gender',
 105             width: 120,
 106             align: 'center',
 107             editable: true,
 108             editor: {
 109                 xtype: 'selectfield',
 110                 options: [{
 111                     text: 'Male',
 112                     value: 'Male'
 113                 }, {
 114                     text: 'Female',
 115                     value: 'Female'
 116                 }]
 117             },
 118
 119             summaryType: 'genderSummaryType'
 120         }]
 121     }, {
 122         text: 'Company',
 123         dataIndex: 'company',
 124         width: 200,
 125         cell: {
 126             xtype: 'textcell',
 127             bind: '{record.company}'
 128         }
 129     }, {
 130         text: 'Registered',
 131         dataIndex: 'registered',
 132         width: 120,
 133         xtype: 'datecolumn',
 134         format: 'd-m-Y'
 135     }]
 136 });