extjs/examples/kitchensink/classic/samples/view/grid/WidgetGrid.js

   1 /**
   2  * This example shows how to create Widgets in grid columns. Widgets are lightweight
   3  * components with a simpler lifecycle.
   4  */
   5 Ext.define('KitchenSink.view.grid.WidgetGrid', {
   6     extend: 'Ext.grid.Panel',
   7     requires: [
   8         'Ext.grid.column.Action',
   9         'Ext.ProgressBarWidget',
  10         'Ext.slider.Widget',
  11         'Ext.sparkline.*'
  12     ],
  13     xtype: 'widget-grid',
  14     store: 'Widgets',
  15     collapsible: true,
  16     height: 350,
  17     width: 1050,
  18     title: 'Widget Grid',
  19     viewConfig: {
  20         stripeRows: true,
  21         enableTextSelection: false,
  22         markDirty: false
  23     },
  24     trackMouseOver: false,
  25     disableSelection: true,
  26     //<example>
  27     otherContent: [{
  28         type: 'Store',
  29         path: 'classic/samples/store/Widgets.js'
  30     },{
  31         type: 'Model',
  32         path: 'classic/samples/model/Widget.js'
  33     }],
  34     //</example>
  35
  36     initComponent: function () {
  37         var me = this;
  38
  39         me.columns = [{
  40             text: 'Button',
  41             width: 105,
  42             xtype: 'widgetcolumn',
  43             dataIndex: 'progress',
  44             widget: {
  45                 width: 90,
  46                 textAlign: 'left',
  47                 xtype: 'splitbutton',
  48                 iconCls: 'widget-grid-user',
  49                 handler: function(btn) {
  50                     var rec = btn.getWidgetRecord();
  51                     Ext.Msg.alert("Button clicked", "Hey! " + rec.get('name'));
  52                 }
  53             }
  54         }, {
  55             text     : 'Progress',
  56             xtype    : 'widgetcolumn',
  57             width    : 120,
  58             dataIndex: 'progress',
  59             widget: {
  60                 xtype: 'progressbarwidget',
  61                 textTpl: [
  62                     '{percent:number("0")}% done'
  63                 ]
  64             }
  65         },
  66         {
  67             text: 'Run Mode',
  68             width: 150,
  69             xtype: 'widgetcolumn',
  70             widget: {
  71                 xtype: 'combo',
  72                 store: [
  73                     'Local',
  74                     'Remote'
  75                 ]
  76             }
  77         },
  78         {
  79             text     : 'Slider',
  80             xtype    : 'widgetcolumn',
  81             width    : 120,
  82             dataIndex: 'progress',
  83             widget: {
  84                 xtype: 'sliderwidget',
  85                 minValue: 0,
  86                 maxValue: 1,
  87                 decimalPrecision: 2,
  88                 listeners: {
  89                     change: function(slider, value) {
  90
  91                         // If the widget has been decorated by the WidgetColumn with context-returning methods
  92                         // then extract data and update its context record.
  93                         if (slider.getWidgetRecord) {
  94                             var rec = slider.getWidgetRecord();
  95                             if (rec) {
  96                                 rec.set('progress', value);
  97                             }
  98                         }
  99                     }
 100                 }
 101             }
 102         }, {
 103             text: 'Line',
 104             width: 100,
 105             dataIndex: 'sequence1',
 106             xtype: 'widgetcolumn',
 107             widget: {
 108                 xtype: 'sparklineline',
 109                 tipTpl: 'Value: {y:number("0.00")}'
 110             }
 111         }, {
 112             text: 'Bar',
 113             width: 100,
 114             dataIndex: 'sequence2',
 115             xtype: 'widgetcolumn',
 116             widget: {
 117                 xtype: 'sparklinebar'
 118             }
 119         }, {
 120             text: 'Discrete',
 121             width: 100,
 122             dataIndex: 'sequence3',
 123             xtype: 'widgetcolumn',
 124             widget: {
 125                 xtype: 'sparklinediscrete'
 126             }
 127         }, {
 128             text: 'Bullet',
 129             width: 100,
 130             dataIndex: 'sequence4',
 131             xtype: 'widgetcolumn',
 132             widget: {
 133                 xtype: 'sparklinebullet'
 134             }
 135         }, {
 136             text: 'Pie',
 137             width: 60,
 138             dataIndex: 'sequence5',
 139             xtype: 'widgetcolumn',
 140             widget: {
 141                 xtype: 'sparklinepie'
 142             }
 143         }, {
 144             text: 'Box',
 145             width: 100,
 146             dataIndex: 'sequence6',
 147             xtype: 'widgetcolumn',
 148             widget: {
 149                 xtype: 'sparklinebox'
 150             }
 151         }, {
 152             text: 'TriState',
 153             width: 100,
 154             dataIndex: 'sequence7',
 155             xtype: 'widgetcolumn',
 156             widget: {
 157                 xtype: 'sparklinetristate'
 158             }
 159         }];
 160
 161         me.tbar = [];
 162         for (var i = 0; i < me.columns.length; i++) {
 163             me.tbar.push({
 164                 text: me.columns[i].text,
 165                 enableToggle: true,
 166                 pressed: true,
 167                 scope: me,
 168                 toggleHandler: me.onButtonToggle
 169             });
 170         }
 171
 172         me.callParent();
 173         me.on({
 174             columnshow: me.onColumnToggle,
 175             columnhide: me.onColumnToggle
 176         });
 177     },
 178
 179     onButtonToggle: function(btn, pressed) {
 180         if (this.processing) {
 181             return;
 182         }
 183
 184         this.processing = true;
 185         var header = this.headerCt.child('[text=' + btn.text + ']');
 186         header.setVisible(pressed);
 187         this.processing = false;
 188     },
 189
 190     onColumnToggle: function(headerCt, header) {
 191         if (this.processing) {
 192             return;
 193         }
 194         this.processing = true;
 195         var btn = this.down('toolbar').child('[text=' + header.text + ']');
 196         btn.setPressed(header.isVisible());
 197         this.processing = false;
 198     }
 199 });