View Full Version : TreePanel XTemplate Example? [ExtJS 4.2]

15 Apr 2013, 8:54 AM
I'd like to create a custom template for each node in a treepanel, but for the life of me I can't seem to get xtemplate to cooperate. I've searched the forums and web for examples with no luck.

xtype: 'treepanel',
title: 'Mapping',
store: 'Nav',
rootVisible: false,
viewConfig: {
itemTpl: [
'<div>test {text}</div>'


I get a "Cannot read property 'id' of null" it appears to be looking for the id, of a non existent dom element.

If anyone could give a simple example of how to use templates with TreePanels, I'd be vary grateful.

16 Apr 2013, 8:58 AM
I've tried to switch out itemTpl with just tpl, with no success.

16 Apr 2013, 10:53 PM
Would using the columns config + a renderer function get you there or you're looking to significantly alter the element rendered for the tree nodes?

columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'text'
, renderer: function (val, meta, record) {
meta.style = 'background-color: lightgreen;';
// ... anything else you can do in a render ...
return 'something';

17 Apr 2013, 5:16 AM
I was hoping to significantly alter everything after the Expander.

17 Apr 2013, 5:46 AM
In that case look at the treeRenderer method in Ext.tree.Column. It does all the magic for hooking up the "tree" stuff.