天天看点
返回

Tree - Creation using script? - Ext JS

I try to build a tree structure using JavaScript like the following:

<div id='navigation'></div>      
var tree = Ext.tree.TreePanel('navigation', {
	animate : true,
	containerScroll : true
});
alert(tree);

but the alert shows undefined! Should it not be possible to build a tree from scratch using JavaScript? Or is it only possible to create it from existing markup or JSON?

I have included the scripts as required for 1.0 alpha2 rev.6

Tree - Creation using script? - Ext JS
  # 2  
Tree - Creation using script? - Ext JS
03-03-2007, 05:57 PM
Tree - Creation using script? - Ext JS

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' }
         ]}
    ]
});
Tree - Creation using script? - Ext JS
  # 3  
Tree - Creation using script? - Ext JS
03-03-2007, 06:21 PM
Tree - Creation using script? - Ext JS
Hi Jeff! So I try the following: 
<html>
<head>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" target="_blank" rel="external nofollow"  />
	<link rel="stylesheet" id="theme" type="text/css" href="../resources/css/ytheme-aero.css" target="_blank" rel="external nofollow"  />
	<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.

Tree - Creation using script? - Ext JS
  # 4  
Tree - Creation using script? - Ext JS
03-03-2007, 06:45 PM
Tree - Creation using script? - Ext JS

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.

Tree - Creation using script? - Ext JS
  # 5  
Tree - Creation using script? - Ext JS
03-03-2007, 08:01 PM
Tree - Creation using script? - Ext JS

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

Tree - Creation using script? - Ext JS

have a nice day!

humpdi

Tree - Creation using script? - Ext JS
  # 6  
Tree - Creation using script? - Ext JS
03-04-2007, 05:31 AM
Tree - Creation using script? - Ext JS
see this link in the manual: http://www.yui-ext.com/manual/treepanel:getting_started
Tree - Creation using script? - Ext JS
  # 7  
Tree - Creation using script? - Ext JS
03-04-2007, 06:23 AM
Tree - Creation using script? - Ext JS
Tree - Creation using script? - Ext JS
thx
Tree - Creation using script? - Ext JS
  # 8  
Tree - Creation using script? - Ext JS
03-04-2007, 01:53 PM
Tree - Creation using script? - Ext JS
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:
Tree - Creation using script? - Ext JS
  # 9  
Tree - Creation using script? - Ext JS
03-05-2007, 07:15 AM
Tree - Creation using script? - Ext JS

Tree w/multiple Roots 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!!

Tree - Creation using script? - Ext JS
  # 10  
Tree - Creation using script? - Ext JS
03-05-2007, 07:19 AM
Tree - Creation using script? - Ext JS
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:
Tree - Creation using script? - Ext JS
extjs EXT css javascript yui json
上一篇: 操作系统 第九章
下一篇: Windows小技巧8--VMware workstation虚拟机网络通信

继续阅读