<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ux-GroupTabRenderer'>/**
|
</span>* Allows GroupTab to render a table structure.
|
*/
|
Ext.define('Ext.ux.GroupTabRenderer', {
|
alias: 'plugin.grouptabrenderer',
|
extend: 'Ext.AbstractPlugin',
|
|
<span id='Ext-ux-GroupTabRenderer-property-tableTpl'> tableTpl: new Ext.XTemplate(
|
</span> '<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
|
}
|
),
|
|
<span id='Ext-ux-GroupTabRenderer-property-rowTpl'> rowTpl: new Ext.XTemplate(
|
</span> '{%',
|
'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
|
}
|
),
|
|
<span id='Ext-ux-GroupTabRenderer-property-cellTpl'> cellTpl: new Ext.XTemplate(
|
</span> '{%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
|
}
|
),
|
|
<span id='Ext-ux-GroupTabRenderer-property-selectors'> selectors: {
|
</span> // 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;
|
}
|
|
},
|
|
<span id='Ext-ux-GroupTabRenderer-method-init'> init: function(grid) {
|
</span> var view = grid.getView(),
|
me = this;
|
view.addTableTpl(me.tableTpl);
|
view.addRowTpl(me.rowTpl);
|
view.addCellTpl(me.cellTpl);
|
Ext.apply(view, me.selectors);
|
}
|
});
|
|
|
|
</pre>
|
</body>
|
</html>
|
