View Full Version : Add icon to tree panel

22 Jun 2012, 6:36 AM
Hey everyone,

Is it possible to add an icons to certain nodes in a tree panel? I have a list of a restaurant menu and the user can click what they want to 'enable' for that time period, like 'disable' all breakfast options and 'enable' lunch items. So the checkbox is to the left and for a majority nodes I want to allow the user to edit the fields by clicking on some edit icon on the right side.. is this possible? Would I have to add a html tag onto my nodes or something like that?


22 Jun 2012, 7:29 AM

Yes it is possible by extending Ext.tree.TreeNodeUI renderElements method, it seems a bit complicated but it is not, just update the buf array that contains the html nodes, but becareful to the last part that assigning the elements to the node, you do not want to confuse the TreeNodeUI :)

If it seems so complicated, you can also try load event of treeloader, after a node is loaded you can reach the ui element of the node and create an html img element then assign the click event for edit.

var elNode = Ext.get(node.childNodes[0].getUI().elNode) , editEl = Ext.get(x.createChild({ tag:'img' , style:'margin-left:5px;width:16px;height:16px;cursor:pointer' , src:'/images/image.png'}))editEl.on('click',function(){alert('hello')})