Tree - Creation using script? - Ext JS

#2 03-03-2007, 05:57 PM

Absolutely you can build up a tree without a JSON request. However, there isn't nearly enough information to build a tree from.

So, you've got the TreePanel defined. But, it doesn't have any information about the root of the tree or what's in the tree. And, finally, you haven't rendered the tree.

Define the root node:

var root = new Ext.tree.TreeNode({
    text: 'My Root',
    id:'my-root'
});

Then, apply that root node to your tree:

tree.setRootNode(root);

Once that's done, all that's left is to render it:

tree.render();

And, optionally, expand the root so it's children are visible:

root.expand();

At this point it should become obvious that something is missing. The tree doesn't have any nodes except for the root. To create the children, update the way the root is defined by defining "children"

var root = new Ext.tree.TreeNode({
    text: 'My Root',
    id:'my-root',
    children: [
      { text: 'Child 1', id: 'child-1' },
      { text: 'Child 2', id: 'child-2' },
      { text: 'Child 3', id: 'child-3', children: [
           { text: 'Grandchild 1', id: 'grandchild-1' },
           { text: 'Grandchild 2', id: 'grandchild-2' }
         ]}
    ]
});

#3 03-03-2007, 06:21 PM

Hi Jeff! So I try the following:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
	<link rel="stylesheet" id="theme" type="text/css" href="../resources/css/ytheme-aero.css" />
	<script type="text/javascript" src="../yui-utilities.js"></script>
	<script type="text/javascript" src="../ext-yui-adapter.js"></script>
	<script type="text/javascript" src="../ext-all.js"></script>

	<script type="text/javascript">
	<!--
		Ext.onReady(function() {
		
			var tree = Ext.tree.TreePanel('tree');
			alert(tree);		// Will show 'undefined'!
			
			var root = Ext.tree.TreeNode({
				text : 'My Root',
				id : 'my-root',
				children: [
					{ text: 'Child 1', id: 'child-1' },
					{ text: 'Child 2', id: 'child-2' },
					{ text: 'Child 3', id: 'child-3', children: [
						{ text: 'Grandchild 1', id: 'grandchild-1' },
						{ text: 'Grandchild 2', id: 'grandchild-2' }
					]}
				]
			});
			
			tree.setRootNode(root);		// Generates error: tree has no properties!
			
			tree.render();
			alert('Finished')
			
		});
	//-->
	</script>
	
</head>
<body>

<div id="tree"></div>

</body>
</html>

but still no luck! See the two comments in the source.

EDIT: Using 1.0 alpha2 rev.6, and all CSS and external JS-files loads according to Firebug.

#4 03-03-2007, 06:45 PM

In your code, you're assigning Ext.tree.TreePanel to a variable called tree, instead of instantiating a new instance of the tree.

Wrong way:

tree = Ext.tree.TreePanel('tree');

Right way:

tree = new Ext.tree.TreePanel('tree');

The same problem exists with the creation of a tree node, even though my example code contains the new constructor.

What I haven't been able to ascertain is why there aren't childnodes being applied to the root.

#5 03-03-2007, 08:01 PM

hey jeff!

i have a little question to you: i looks like you can explain this thing real good, like a step-by-step tutorial... micha had done a lil tutorial about a paging-grid (http://www.yui-ext.com/forum/viewtopic.php?t=3286) similar to your explanation..

my question is: do you want (and have the time) to do such a small tutorial for tree-view? i think if more people like you and micha will write such tutorials and we collect them all together, everybody (specially somebody whos new to ext) will be able to learn much quicker.

just think about, i think jack and his team thought about this for the new page already, however, would be nice if you will share your experience with us

have a nice day!

humpdi

#6 03-04-2007, 05:31 AM

see this link in the manual: http://www.yui-ext.com/manual/treepanel:getting_started

#7 03-04-2007, 06:23 AM

thx

#8 03-04-2007, 01:53 PM

Quote:

Originally Posted by JeffHowden

In your code, you're assigning Ext.tree.TreePanel to a variable called tree, instead of instantiating a new instance of the tree.

Wrong way:

tree = Ext.tree.TreePanel('tree');

Right way:

tree = new Ext.tree.TreePanel('tree');

The same problem exists with the creation of a tree node, even though my example code contains the new constructor.

Repeat after me... do NOT try to work as many hours straight as Jack Slocum... do NOT... :lol: Thanks Jeff... I believe that I'm getting really good at Ext API but sometimes I just forget about the little things.... like this "new" :roll:

#9 03-05-2007, 07:15 AM

Does anyone have an example how to add multiple Root Nodes to TreePanel? I'm looking to usethe TreePanel like a ListTree? User Privs would determine which Root Nodes get displayed as well as what Clubs get shown...

For Example:

+ Clubs (Root Node)
- Club 1
- Club N
+ Jr Clubs (Root Node)
- Club Jr 1
- Club Jr N

Any assistance provided is appreciated!
Thanks in advance!!

#10 03-05-2007, 07:19 AM

What you need to do is create a dummy root note and then hide it:

var tree = new Ext.tree.TreePanel('tree_id', {
	rootVisible : false,
	lines : false,
	containerScroll : true
});

and then make your own "root"-nodes children of this hidden root :wink: