text: /**
  * Allows GroupTab to render a table structure.
  */
  Ext.define('Ext.ux.GroupTabRenderer', {
      extend: 'Ext.plugin.Abstract',
      alias: 'plugin.grouptabrenderer',
  
      tableTpl: new Ext.XTemplate(
          '<div id="{view.id}-body" class="' + Ext.baseCSSPrefix + '{view.id}-table ' + Ext.baseCSSPrefix + 'grid-table-resizer" style="{tableStyle}">',
              '{%',
                  'values.view.renderRows(values.rows, values.viewStartIndex, out);',
              '%}',
          '</div>',
          {
              priority: 5
          }
      ),
  
      rowTpl: new Ext.XTemplate(
          '{%',
              'Ext.Array.remove(values.itemClasses, "', Ext.baseCSSPrefix + 'grid-row");',
              'var dataRowCls = values.recordIndex === -1 ? "" : " ' + Ext.baseCSSPrefix + 'grid-data-row";',
          '%}',
          '<div {[values.rowId ? ("id=\\"" + values.rowId + "\\"") : ""]} ',
              'data-boundView="{view.id}" ',
              'data-recordId="{record.internalId}" ',
              'data-recordIndex="{recordIndex}" ',
              'class="' + Ext.baseCSSPrefix + 'grouptab-row {[values.itemClasses.join(" ")]} {[values.rowClasses.join(" ")]}{[dataRowCls]}" ',
              '{rowAttr:attributes}>',
              '<tpl for="columns">' +
                  '{%',
                      'parent.view.renderCell(values, parent.record, parent.recordIndex, parent.rowIndex, xindex - 1, out, parent)',
                   '%}',
              '</tpl>',
          '</div>',
          {
              priority: 5
          }
      ),
  
      cellTpl: new Ext.XTemplate(
          '{%values.tdCls = values.tdCls.replace(" ' + Ext.baseCSSPrefix + 'grid-cell "," ");%}',
          '<div class="' + Ext.baseCSSPrefix + 'grouptab-cell {tdCls}" {tdAttr}>',
              '<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'grid-cell-inner" style="text-align: {align}; {style};">{value}</div>',
              '<div class="x-grouptabs-corner x-grouptabs-corner-top-left"></div>',
              '<div class="x-grouptabs-corner x-grouptabs-corner-bottom-left"></div>',
          '</div>',
          {
              priority: 5
          }
      ),
  
      selectors: {
          // Outer table
          bodySelector: 'div.' + Ext.baseCSSPrefix + 'grid-table-resizer',
  
          // Element which contains rows
          nodeContainerSelector: 'div.' + Ext.baseCSSPrefix + 'grid-table-resizer',
  
          // row
          itemSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab-row',
  
          // row which contains cells as opposed to wrapping rows
          rowSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab-row',
  
          // cell
          cellSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab-cell', 
  
          getCellSelector: function(header) {
              return header ? header.getCellSelector() : this.cellSelector; 
          }
  
      },
  
      init: function(grid) {
          var view = grid.getView(), 
              me = this;
          view.addTpl(me.tableTpl);
          view.addRowTpl(me.rowTpl);
          view.addCellTpl(me.cellTpl);
          Ext.apply(view, me.selectors);
      }
  });
  
  
  
  