text: /**
   * This example shows how to create Widgets in grid columns. Widgets are lightweight
   * components with a simpler lifecycle.
   */
  Ext.define('KitchenSink.view.grid.WidgetGrid', {
      extend: 'Ext.grid.Panel',
      requires: [
          'Ext.grid.column.Action',
          'Ext.ProgressBarWidget',
          'Ext.slider.Widget',
          'Ext.sparkline.*'
      ],
      xtype: 'widget-grid',
      store: 'Widgets',
      collapsible: true,
      height: 350,
      width: 1050,
      title: 'Widget Grid',
      viewConfig: {
          stripeRows: true,
          enableTextSelection: false,
          markDirty: false
      },
      trackMouseOver: false,
      disableSelection: true,
      //<example>
      otherContent: [{
          type: 'Store',
          path: 'app/store/Widgets.js'
      },{
          type: 'Model',
          path: 'app/model/Widget.js'
      }],
      //</example>
  
      initComponent: function () {
          var me = this;
  
          me.columns = [{
              text: 'Button',
              width: 105,
              xtype: 'widgetcolumn',
              dataIndex: 'progress',
              widget: {
                  width: 90,
                  xtype: 'splitbutton',
                  icon: '../shared/icons/fam/feed_add.png',
                  handler: function(btn) {
                      var rec = btn.getWidgetRecord();
                      Ext.Msg.alert("Button clicked", "Hey! " + rec.get('name'));
                  }
              }
          }, {
              text     : 'Progress',
              xtype    : 'widgetcolumn',
              width    : 120,
              dataIndex: 'progress',
              widget: {
                  xtype: 'progressbarwidget',
                  textTpl: [
                      '{percent:number("0")}% done'
                  ]
              }
          }, 
          {
              text: 'Run Mode',
              width: 150,
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'combo',
                  store: [
                      'Local',
                      'Remote'
                  ],
                  listeners: {
                      select: function(combo){
                          console.log(combo.getValue() + ' selected');
                      }
                  }
              }
          },
          {
              text     : 'Slider',
              xtype    : 'widgetcolumn',
              width    : 120,
              dataIndex: 'progress',
              widget: {
                  xtype: 'sliderwidget',
                  minValue: 0,
                  maxValue: 1,
                  decimalPrecision: 2,
                  listeners: {
                      change: function(slider, value) {
  
                          // If the widget has been decorated by the WidgetColumn with context-returning methods
                          // then extract data and update its context record.
                          if (slider.getWidgetRecord) {
                              var rec = slider.getWidgetRecord();
                              if (rec) {
                                  rec.set('progress', value);
                              }
                          }
                      }
                  }
              }
          }, {
              text: 'Line',
              width: 100,
              dataIndex: 'sequence1',
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'sparklineline',
                  tipTpl: 'Value: {y:number("0.00")}'
              }
          }, {
              text: 'Bar',
              width: 100,
              dataIndex: 'sequence2',
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'sparklinebar'
              }
          }, {
              text: 'Discrete',
              width: 100,
              dataIndex: 'sequence3',
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'sparklinediscrete'
              }
          }, {
              text: 'Bullet',
              width: 100,
              dataIndex: 'sequence4',
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'sparklinebullet'
              }
          }, {
              text: 'Pie',
              width: 60,
              dataIndex: 'sequence5',
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'sparklinepie'
              }
          }, {
              text: 'Box',
              width: 100,
              dataIndex: 'sequence6',
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'sparklinebox'
              }
          }, {
              text: 'TriState',
              width: 100,
              dataIndex: 'sequence7',
              xtype: 'widgetcolumn',
              widget: {
                  xtype: 'sparklinetristate'
              }
          }];
  
          me.tbar = [];
          for (var i = 0; i < me.columns.length; i++) {
              me.tbar.push({
                  text: me.columns[i].text,
                  enableToggle: true,
                  pressed: true,
                  scope: me,
                  toggleHandler: me.onButtonToggle
              });
          }
  
          me.callParent();
          me.on({
              columnshow: me.onColumnToggle,
              columnhide: me.onColumnToggle
          })
      },
  
      onButtonToggle: function(btn, pressed) {
          if (this.processing) {
              return;
          }
  
          this.processing = true;
          var header = this.headerCt.child('[text=' + btn.text + ']');
          header.setVisible(pressed);
          this.processing = false;
      },
  
      onColumnToggle: function(headerCt, header) {
          if (this.processing) {
              return;
          }
          this.processing = true;
          var btn = this.down('toolbar').child('[text=' + header.text + ']');
          btn.setPressed(header.isVisible());
          this.processing = false;
      }
  });