/** * 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); }});