PHP Code:
Ext.define('My.TreeChunker', {
requires: ['Ext.XTemplate'],
metaRowTpl: [
'<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]} tree-depth-{[this.embedDepth()]}">', // this.embedDepth() defined below
'<tpl for="columns">',
'<td class="' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{id} {{id}-modified} {{id}-tdCls}" {{id}-tdAttr}><div unselectable="on" class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
'</tpl>',
'</tr>'
],
metaTableTpl: [
'{[this.openTableWrap()]}',
'<table class="' + Ext.baseCSSPrefix + 'grid-table ' + Ext.baseCSSPrefix + 'grid-table-resizer" border="0" cellspacing="0" cellpadding="0" {[this.embedFullWidth()]}>',
'<tbody>',
'<tr>',
'<tpl for="columns">',
'<th class="' + Ext.baseCSSPrefix + 'grid-col-resizer-{id}" style="width: {width}px; height: 0px;"></th>',
'</tpl>',
'</tr>',
'{[this.openRows()]}',
'{row}',
'<tpl for="features">',
'{[this.embedFeature(values, parent, xindex, xcount)]}',
'</tpl>',
'{[this.closeRows()]}',
'</tbody>',
'</table>',
'{[this.closeTableWrap()]}'
],
constructor: function () {
Ext.XTemplate.prototype.recurse = function (values, reference) {
return this.apply(reference ? values[reference] : values);
};
},
// embed a depth field template value into the template
// (because this template gets created ONCE by running the template,
// and the result is called on each row.)
embedDepth: function (values, parent, x, xcount) {
return '{depth}';
},
embedFeature: function (values, parent, x, xcount) {
var tpl = '';
if (!values.disabled) {
tpl = values.getFeatureTpl(values, parent, x, xcount);
}
return tpl;
},
embedFullWidth: function () {
return 'style="width: {fullWidth}px;"';
},
openRows: function () {
return '<tpl for="rows">';
},
closeRows: function () {
return '</tpl>';
},
embedRowCls: function () {
return '{rowCls}';
},
openTableWrap: function () {
return '';
},
closeTableWrap: function () {
return '';
},
getTableTpl: function (cfg, textOnly) {
var tpl,
tableTplMemberFns = {
openRows: this.openRows,
closeRows: this.closeRows,
embedFeature: this.embedFeature,
embedFullWidth: this.embedFullWidth,
openTableWrap: this.openTableWrap,
closeTableWrap: this.closeTableWrap
},
tplMemberFns = {},
features = cfg.features || [],
ln = features.length,
i = 0,
memberFns = {
embedDepth: this.embedDepth, // make my function visible to the template
embedRowCls: this.embedRowCls
},
metaRowTpl = Array.prototype.slice.call(this.metaRowTpl, 0),
metaTableTpl;
for (; i < ln; i++) {
if (!features[i].disabled) {
features[i].mutateMetaRowTpl(metaRowTpl);
Ext.apply(memberFns, features[i].getMetaRowTplFragments());
Ext.apply(tplMemberFns, features[i].getTplFragments());
Ext.apply(tableTplMemberFns, features[i].getTableFragments());
}
}
metaRowTpl = new Ext.XTemplate(metaRowTpl.join(''), memberFns);
cfg.row = metaRowTpl.applyTemplate(cfg);
metaTableTpl = new Ext.XTemplate(this.metaTableTpl.join(''), tableTplMemberFns);
tpl = metaTableTpl.applyTemplate(cfg);
if (!textOnly) {
tpl = new Ext.XTemplate(tpl, tplMemberFns);
}
return tpl;
}
});
Ext.define('My.TreeView', {
extend: 'Ext.tree.TreeView',
alias: 'widget.mytreeview',
chunker: new My.TreeChunker(), // use my table chunker
collectData: function(records) {
var data = this.callParent(arguments),
rows = data.rows,
ln = rows.length,
i;
for (i = 0; i < ln; i++) {
// set depth on row data to that of tree node
rows[i].depth = records[i].getDepth();
}
return data;
}
});
tree = new Ext.tree.TreePanel(
{
viewType: 'mytreeview', // specify my treeview extension
border: false,
store: store, // declared elsewhere
singleExpand: true,
draggable: false,
rootVisible: false,
listeners: {
// limit tree depth by making 4th level nodes leaf nodes
'beforeitemappend': function (parent, node) {
if (parent.getDepth() === 3) {
node.data.leaf = true; // only display tree 4 nodes deep (customer requirement)
}
}
}
});