    /**
    * Allows GroupTab to render a table structure.
    */
    Ext.define('Ext.ux.GroupTabRenderer', {
        alias: 'plugin.grouptabrenderer',
        extend: 'Ext.AbstractPlugin',

        tableTpl: new Ext.XTemplate(
            '<div id="{view.id}-body" class="' + Ext.baseCSSPrefix + '{view.id}-table ' + Ext.baseCSSPrefix + 'grid-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, 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
            dataRowSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab-row',

            // cell
            cellSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab-cell',

            getCellSelector: function(header) {
                var result = 'div.' + Ext.baseCSSPrefix + 'grid-cell';
                if (header) {
                    result += '-' + header.getItemId();
                }
                return result;
            }

        },

        init: function(grid) {
            var view = grid.getView(),
                me = this;
            view.addTableTpl(me.tableTpl);
            view.addRowTpl(me.rowTpl);
            view.addCellTpl(me.cellTpl);
            Ext.apply(view, me.selectors);
        }
    });