PDA

View Full Version : Tree auto expand on click



Aldri
12 Oct 2009, 12:44 AM
Hello !
I've defined a tree, and a context menu on this tree.
What I want is the following:
when I click on the node: expand the node
when i right click: show the context menu, and when i click on the "expand all" item of this menu, expand all children nodes

Right now this is all working fine, i just change the tree loader base params to define an expand parameters on my children nodes when i use the context menu to expand all: the first node is expanded, children are loaded with the expand parameter and they expand all by themselves.
When i click on the node with my left click, the parameter is reset and the current node is expanded but not all children.

But then I found a nasty bug, if i click on the (+) at left of the node, the 'click' event is not fired, so the tree loader parameter is not reset ! If I previously used the 'expand all' context menu item, then all children will expand with the click on (+)... and I don't want that !

Do you know what event is fired when you click on the (+) and where to add a listener for that thing ? Or maybe is there a way to find which part of a node is clicked ?

Here is my code :

var Tree_Category_Loader = new Ext.tree.TreeLoader({
dataUrl : "includes/tree_loader.php",
baseParams: {'expandNodes' : false}
});
items:[{
title: 'Navigation',
region: 'west',
xtype: 'treepanel',
id: 'tree',
margins:'35 0 5 5',
cmargins:'35 5 5 5',
split: true,
collapsible: true,
width: 300,
autoScroll: true,
//split: true,
loader: Tree_Category_Loader,
root: createRoots(),
rootVisible: true,
contextMenu: new Ext.menu.Menu({
items: [{
id: 'expand-node',
text: 'Déployer la branche',
icon:'resources/icones/expandAll.gif'
},{
id: 'export-xls',
text: 'Exporter au format excel',
icon:'resources/icones/excel.gif'
}],
listeners: {
itemclick: function(item) {
switch (item.id) {
case 'expand-node':
var n = item.parentMenu.contextNode;
Tree_Category_Loader.baseParams = {'expandNodes': true};
if(n.isExpanded())
n.expandChildNodes();
else
n.expand();
break;
case 'export-xls':
var n = item.parentMenu.contextNode;
window.open('includes/export_xls.php?recordID='+n.id,'_blank');
break;
}
}
}
}),
listeners: {
contextmenu: function(node, e) {
// Register the context node with the menu so that a Menu Item's handler function can access
// it via its parentMenu property.
node.select();
var c = node.getOwnerTree().contextMenu;
c.contextNode = node;
var items = c.items;
if(node.id == 0 || !node.isExpandable())
items.get('expand-node').setDisabled(true);
else
items.get('expand-node').setDisabled(false);

if(node.id == 0 || node.id.startsWith('218') || node.id.startsWith('219'))
items.get('export-xls').setDisabled(true);
else
items.get('export-xls').setDisabled(false);
c.showAt(e.getXY());
},
click: function(n) {
Tree_Category_Loader.baseParams = {'expandNodes': false};
n.expand(); // on expand le noeud si il a des childs
}
}
}

Aldri
12 Oct 2009, 10:56 PM
no one knows if there is a specific event fired when you click on this [+] ? Is there any way with firebug to see the events fired ?

Aldri
16 Oct 2009, 12:09 AM
If anyone interested, I found the solution and it's stupid as hell...
I was reading the file TreeNode.js and found this in the comments:



/**
* Expand this node.
* @param {Boolean} deep (optional) True to expand all children as well
* @param {Boolean} anim (optional) false to cancel the default animation
* @param {Function} callback (optional) A callback to be called when
* expanding this node completes (does not wait for deep expand to complete).
* Called with 1 parameter, this node.
*/
expand : function(deep, anim, callback){ [...]
I juste had to change the context menu effect for expand all click with :

expand(true)And now the children will auto expand, thanks to the "true" parameter... no more baseparams to change on the loader !
It's just that simple ^^
I don't know how I could have missed this !

Animal
16 Oct 2009, 12:18 AM
You don't have to read source to find out how it works (Though kudos for doing so - you'll learn a lot!)

Those special comments are documentation which appear in the API docs:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/TreeNode_expand.jpg

Aldri
16 Oct 2009, 12:21 AM
yeah I know but I was sure (and wrong about it) that it was not in the doc :)