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