PDA

View Full Version : Clicking only the leafs in a TreePanel



dana.lees
8 Sep 2009, 12:52 AM
Hello,

I am using a TreePanel with a 'click' function.
I have added the following code to make sre that only when pressing the leafs, the appropriate content is shown:



tree.on('click', function(node) {
if (node.isLeaf()) {
......
}
}


I would like the nodes in the tree that are not leafs, not to be clickable (the user will only be able to press the '+' sign to expand the tree, but not click on the label of that node).
How can I achieve that?

thanks

bo.
8 Sep 2009, 3:50 AM
Try this one:

tree.on('click', function(node){
var snode = this.selModel.selNode || {}; //selNode is null on initial selection
if(node.leaf && node.id != snode.id){ //ignore clicks on folders and currently selected node
//Your code here
}
});

This example i've took from "layout-browser" (http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html)

It will work, because "leaf" property is boolean. So just check - if this property exists, so this is a leaf.

dana.lees
8 Sep 2009, 4:01 AM
Thank you very much for your answer.
Unfortunately, that doesn't help. I get the same behavior as I had before.
When pressing nodes which are not leafs, they are colored.
I would like to prevent that, if possible - to make them 'unselectable' at all.

Thanks

bo.
8 Sep 2009, 4:44 AM
So, this one would help you:

Try this:


//This is the part of your tree description
listeners:{
click:treeClick,
beforeclick:beforeTreeClick
}




function beforeTreeClick(node){
if (!node.leaf){ //if click on folder
return false; //cancel click
}
}

function treeClick(node, evtObj){
var snode = this.selModel.selNode || {}; //selNode is null on initial selection /the same/
if(node.id != snode.id){ //ignore clicks on currently selected node /the same/
//your code here
}
}


or another way:


tree.on('click', function(node){
var snode = this.selModel.selNode || {}; //selNode is null on initial selection
if(node.id != snode.id){ //ignore clicks on currently selected node
//Your code here
}
});

tree.on('beforeclick', function(node){
if (!node.leaf){ //if click on folder
return false; //cancel click
}
});


If folder is selected, then we just cancel event before it started. It works.

dana.lees
8 Sep 2009, 4:46 AM
great, thanks!!!
I'll try that and let you know.

dana.lees
8 Sep 2009, 8:27 PM
Thank you very much.
It is working perfectly!