方法来源于sencha论坛
https://www.sencha.com/forum/showthread.php?295898
-------------------------------
Ext.define('Fiddle.tree.Column', {
override: 'Ext.tree.Column',cellTpl: [
'<tpl for="lines">',
'<img src="{parent.blankUrl}" class="{parent.childCls} {parent.elbowCls}-img ',
'{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"/>',
'</tpl>',
'<img src="{blankUrl}" class="{childCls} {elbowCls}-img {elbowCls}',
'<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"/>',
'<tpl if="checked !== null">',
'<input type="button" {ariaCellCheckboxAttr}',
' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"/>',
'</tpl>',
'<tpl if="glyph && glyphFontFamily">',
'<span style="font-family:{glyphFontFamily}"><tpl if="glyph">&#{glyph};</tpl></span>',
'<tpl else>',
'<img src="{blankUrl}" role="presentation" class="{childCls} {baseIconCls} ',
'{baseIconCls}-<tpl if="leaf">leaf<tpl else>parent</tpl> {iconCls}"',
'<tpl if="icon">style="background-image:url({icon})"</tpl>/>',
'</tpl>',
'<tpl if="href">',
'<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
'<tpl else>',
'<span class="{textCls} {childCls}">{value}</span>',
'</tpl>'
],
initTemplateRendererData: function(value, metaData, record, rowIdx, colIdx, store, view) {
var me = this,
renderer = me.origRenderer,
data = record.data,
parent = record.parentNode,
rootVisible = view.rootVisible,
lines = [],
parentData,
glyph,
glyphFontFamily;
while (parent && (rootVisible || parent.data.depth > 0)) {
parentData = parent.data;
lines[rootVisible ? parentData.depth : parentData.depth - 1] =
parentData.isLast ? 0 : 1;
parent = parent.parentNode;
}
if (typeof data.glyph === 'string') {
glyphParts = data.glyph.split('@');
glyph = glyphParts[0];
glyphFontFamily = glyphParts[1];
} else {
glyph = data.glyph;
glyphFontFamily = Ext._glyphFontFamily;
}
return {
record: record,
baseIconCls: me.iconCls,
iconCls: data.iconCls,
icon: data.icon,
checkboxCls: me.checkboxCls,
checked: data.checked,
elbowCls: me.elbowCls,
expanderCls: me.expanderCls,
textCls: me.textCls,
leaf: data.leaf,
expandable: record.isExpandable(),
isLast: record.isLastVisible(),
blankUrl: Ext.BLANK_IMAGE_URL,
href: data.href,
glyph: glyph,
glyphFontFamily: glyphFontFamily,
hrefTarget: data.hrefTarget,
lines: lines,
metaData: metaData,
// subclasses or overrides can implement a getChildCls() method, which can
// return an extra class to add to all of the cell's child elements (icon,
// expander, elbow, checkbox). This is used by the rtl override to add the
// "x-rtl" class to these elements.
childCls: me.getChildCls ? me.getChildCls() + ' ' : '',
value: renderer ? renderer.apply(me.origScope, arguments) : value
};
}
});
Ext.application({
name: 'Fiddle',
glyphFontFamily: 'FontAwesome',
launch: function() {
var tStore = Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root',
expanded: true,
id: 'all',
root: true,
iconCls: 'leafnode',
children: [
{
text: 'Child 1',
leaf: true,
id: 'child-1',
glyph: 0xf1ad
},
{
text: 'Child 2',
leaf: true,
id: 'child-2',
glyph: 0xf1ad
},
{
text: 'Child 3',
expanded: true,
id: 'child-3',
glyph: 0xf1ad,
children: [
{
text: 'Grandchild',
leaf: true,
id: 'child-3-1',
glyph: 0xf1ad
}
]
}
]
}
});
Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Tree',
selType: 'treemodel',
allowDeselect: false,
width: 300,
height: 250,
iconCls: 'fa fa-building',
tbar: [
{text: 'Set Path',
handler: function(btn) {
var tree = btn.up('treepanel'),
tStore = tree.getStore(),
selectedNode = tStore.getNodeById('child-3-1');
//var path = '/all/child3/child3_1';
tree.selectPath(selectedNode.getPath());
}}
],
store: tStore,
rootVisible: true
});
}
});