I try to build a tree structure using JavaScript like the following:
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
<div id='navigation'></div>
var tree = Ext.tree.TreePanel('navigation', {
animate : true,
containerScroll : true
});
alert(tree);
I have included the scripts as required for 1.0 alpha2 rev.6

|
#2
|
|
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'
});
tree.setRootNode(root); tree.render(); root.expand(); 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
|
|
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>
EDIT: Using 1.0 alpha2 rev.6, and all CSS and external JS-files loads according to Firebug. ![]() |
|
#4
|
|
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');
tree = new Ext.tree.TreePanel('tree');
What I haven't been able to ascertain is why there aren't childnodes being applied to the root. ![]() |
|
#5
|
|
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
|
|
see this link in the manual: http://www.yui-ext.com/manual/treepanel:getting_started
![]() |
|
#7
|
thx![]() |
|
#8
| |
|
Quote:
![]() |
|
#9
|
|
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
|
|
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
});
![]() |
本文详细介绍了如何使用JavaScript从零开始构建一个树状面板组件,包括定义根节点、子节点及渲染过程。通过实例演示了常见错误及其解决方法。

thx

被折叠的 条评论
为什么被折叠?



