PDA

View Full Version : Another way to load nodes in a tree



Gwayn
6 Jul 2007, 6:44 AM
Hi all again, i wonder if there's an alternative way to the TreeLoader to load nodes in a tree.
For example if i define a node and the i set it as Root the node is statically added to the tree.




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

tree.setRootNode(root);



How can i add to this root node more nodes statically defined.
And which attribites are demanding for a node?
Can i just set the parentNode attribute in each node instead of use the childNodes attribute and write in it all the child nodes?

EDIT: OK there is the function appendChild but to generate a tree with this function i need anyway a recursive function that append the children to the root node... the question is how if i want to just add the nodes and let the attribute parentNode to tell the tree where a node should be?

Animal
6 Jul 2007, 8:01 AM
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'root',
children: [{text: "foo", children:[{text:"bar"}]}]
})
tree.setRootNode(root);

Gwayn
6 Jul 2007, 9:11 AM
Ahemm... no maybe i've been no self-explainating, anyway i found a resolution.
But i still have a problem.

I wanted not to use a recursive function to generate my tree but just read a DB and generate via php a js code that adds the nodes to theyr parent:

here's the code i wrote



$lingua = 'it';
$db = new database;
$oNode= new contenitore;

$rs = $db->getResults($oNode->dbtab, 'id, root', "tipo = 'sezione' OR tipo = 'pagina'",'tipo DESC, root ASC, ordine ASC');

$oNode -> autocompile(1);
echo "var root = new Tree.AsyncTreeNode({text: '".$oNode->getNome($lingua)."',draggable: false,id: 1});";
echo "tree.setRootNode(root);";


while ($node = mysql_fetch_array($rs))
{
$root = $node['root'];
$oNode -> autocompile($node['id']);
$nome = str_replace("'", "\'", $oNode->getNome($lingua));
if ($oNode->id != 1)
echo "tree.getNodeById($root).appendChild(new Tree.AsyncTreeNode({text: '".$nome."',draggable: false,id: ".$oNode->id."}));";
}



1. I generate the code for the root node, never changes its id so i can just define it and make a root.
2. I search in the database all the nodes
3. For each node i read its parent node (called root), the title and its id
4. I generate an ext code that takes the Parent Node of the current node and adds the current node to the parent.


Anyway the problem now is that when i click on a node in the tree to open it i see the "loading" animated gif... and it never stops... the tree keeps working properly...
What can i do?

The JS code generated by the php is



Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

var tree = new Tree.TreePanel('treebox', {
animate:true,

enableDD:true,
containerScroll: true
});

// php generated code
var root = new Tree.AsyncTreeNode({text: 'Animae',draggable: false,id: 1});
tree.setRootNode(root);
tree.getNodeById(1).appendChild(new Tree.AsyncTreeNode({text: 'News',draggable: false,id: 3}));
tree.getNodeById(1).appendChild(new Tree.AsyncTreeNode({text: 'Approfondimenti',draggable: false,id: 4}));
//...and so on

// render the tree
tree.render();

});

Animal
7 Jul 2007, 1:26 AM
Load the tree directly from a PHP script: http://extjs.com/deploy/ext-1.1-beta2/docs/output/Ext.tree.TreeLoader.html#config-dataUrl

See the Tree examples in the documentation page.

Gwayn
7 Jul 2007, 3:04 AM
Load the tree directly from a PHP script: http://extjs.com/deploy/ext-1.1-beta2/docs/output/Ext.tree.TreeLoader.html#config-dataUrl

See the Tree examples in the documentation page.

Yes but if i don't specify the children nodes for each node i get an infinite tree that reapeat iself when i open each node. There's a way not to specify the children nodes?

HuyDung
7 Jul 2007, 7:21 AM
Give each of your nodes an id. When a node is clicked, It send a request to the same page from which the root node was load, with one parameters named 'node' and value is id of the node.So, In server side make some condition.
pseudo:
node = request("node")
if node = "source" then
return sourceChilds
else if node = "child1" then
return child1Childs
...
else
return("{success:false}")
end if

----
I used the above method before but actually I like to load tree structure all-in-one with 'children' property, like I'm doing now. I think users do not like to wait so much :)

Gwayn
7 Jul 2007, 8:35 AM
Thanks for the help.
Nice hint but i resolved in the way i explainde in my last post, only using TreeNode instead of AsyncTreeNode. It's pretty fast and it works fine.

Gwayn
7 Jul 2007, 9:13 AM
Another problem with the treepanel:



tree.on("click", contentPanel.refresh());


i get the following error from FireBug


l.fireFn has no properties
Observable()ext-all.js (line 15)
Observable()ext-all.js (line 15)
Tree("click")ext-all.js (line 95)
TreeNodeUI()ext-all.js (line 143)
TreeNodeUI(Object browserEvent=Event mousemove button=0)ext-all.js (line 143)
EventManager(Object browserEvent=Event mousemove button=0)ext-all.js (line 17)
Event(click clientX=0, clientY=0)yui-utilities.js (line 13)
[Break on this error] Ext.util.Observable=function(){if(this.listeners){this.on(this.listeners);delete...


What can i do?


EDIT: Solved with



tree.on("click", function() {contentPanel.refresh()});


Sorry for the stupid questions but im a beginner.