PDA

View Full Version : How to not display treenode toggle icon?



netharry
27 Oct 2007, 12:53 AM
Hi all,
I want a treenode toggle(ie minus,plus) icon not to be displayed but the treenode is not a leaf.
thanks

Animal
27 Oct 2007, 1:47 AM
Use the following override. Changes in bold.

It takes away important user interface information though - why do you want this?



Ext.override(Ext.tree.TreeNodeUI, {
updateExpandIcon : function(){
if(this.rendered){
var n = this.node, c1, c2;
var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
var hasChild = n.hasChildNodes();
if(hasChild || n.attributes.expandable){
if(n.expanded){
// cls += "-minus";
c1 = "x-tree-node-collapsed";
c2 = "x-tree-node-expanded";
}else{
// cls += "-plus";
c1 = "x-tree-node-expanded";
c2 = "x-tree-node-collapsed";
}
if(this.wasLeaf){
this.removeClass("x-tree-node-leaf");
this.wasLeaf = false;
}
if(this.c1 != c1 || this.c2 != c2){
Ext.fly(this.elNode).replaceClass(c1, c2);
this.c1 = c1; this.c2 = c2;
}
}else{
if(!this.wasLeaf){
Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
delete this.c1;
delete this.c2;
this.wasLeaf = true;
}
}
var ecc = "x-tree-ec-icon "+cls;
if(this.ecc != ecc){
this.ecNode.className = ecc;
this.ecc = ecc;
}
}
}
});

netharry
27 Oct 2007, 2:44 AM
thanks,your tree can do everything!
I use this to make it like IE's favourite.

netharry
29 Oct 2007, 8:16 PM
Thanks again. But there is still a problem, I create another tree without this override in the same page, how to do it?

Animal
30 Oct 2007, 12:14 AM
OK, instead of overriding on the class, just put that function into the Tree instance that you wish to override for.

netharry
30 Oct 2007, 2:13 AM
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree',
autoScroll:true,

animate:true,
enableDD:true,
enableDrag:true,
rootVisible:false,
singleExpand:true,
height:280,
width:440,

loader: new Tree.TreeLoader({
dataUrl:'../data/get_folders_hrefs.aspx'
}),

updateExpandIcon : function(){
if(this.rendered){
var n = this.node, c1, c2;
var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
var hasChild = n.hasChildNodes();
if(hasChild || n.attributes.expandable){
if(n.expanded){
//cls += "-minus";
c1 = "x-tree-node-collapsed";
c2 = "x-tree-node-expanded";
}else{
//cls += "-plus";
c1 = "x-tree-node-expanded";
c2 = "x-tree-node-collapsed";
}
if(this.wasLeaf){
this.removeClass("x-tree-node-leaf");
this.wasLeaf = false;
}
if(this.c1 != c1 || this.c2 != c2){
Ext.fly(this.elNode).replaceClass(c1, c2);
this.c1 = c1; this.c2 = c2;
}
}else{
if(!this.wasLeaf){
Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-collapsed");
delete this.c1;
delete this.c2;
this.wasLeaf = true;
}
}
var ecc = "x-tree-ec-icon "+cls;
if(this.ecc != ecc){
this.ecNode.className = ecc;
this.ecc = ecc;
}
}
}
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext Root ',
draggable:false,
id:'0'
});

tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
It can work, but can not hide toggle icon, is it correct?

Animal
30 Oct 2007, 4:41 AM
Looks good. Set a breakpoint in that function, see if it gets run.

netharry
30 Oct 2007, 5:52 AM
I did it with firebug, it dosen't get run. how to resolve it ?
thanks

Animal
30 Oct 2007, 5:58 AM
It's a method of TreeNodeUI

You're going to have to create a subclass of TreeNodeUI with that function as its updateExpandIcon:



MyNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
function updateExpandIcon: {
...
}
});


Then specify



uiProvider: MyNodeUI


On every node of that tree. Sorry, there isn't a good way of specifying a UIProvider for a whole tree.

There really should be. I'm going to post an enhancement request.

Animal
30 Oct 2007, 6:03 AM
Actually, there is a way.

Specify



baseAttrs: {uiProvider:MyNodeUI}


in the loader config for that TreePanel. That will use your subclass for all nodes in that TreePanel.

netharry
30 Oct 2007, 6:45 AM
Thank you, it works!