Tree with AsyncTreeNode - Ext JS
9748 ワード
I have this tree code which drops into examples/tree
It looks great. Trouble is, I can't figure out how to make the tree be loaded without explicitly expanding all nodes.
If you load the page, just the root node is visible. Click "View XML", and you get the XML representation of the root node. It doesn't know about child nodes - they're not loaded.
If you expand the node, the child nodes are populated (But not
their child nodes).
I've tried changing the root to be an Ext.tree.TreeNode, but that didn't work. Do I have to expand the whole tree and then collapse it again?
#
2
03-09-2007, 09:19 AM
The only way I've found is starting the tree with animate:false, then
It looks great. Trouble is, I can't figure out how to make the tree be loaded without explicitly expanding all nodes.
If you load the page, just the root node is visible. Click "View XML", and you get the XML representation of the root node. It doesn't know about child nodes - they're not loaded.
If you expand the node, the child nodes are populated (But not
their child nodes).
I've tried changing the root to be an Ext.tree.TreeNode, but that didn't work. Do I have to expand the whole tree and then collapse it again?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TreePanel XML View</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.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-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var tree = new Ext.tree.TreePanel('menuContainer', {
loader: new Ext.tree.TreeLoader(),
animate: true,
enableDD: true,
ddGroup: "menuTree"
});
var newNodeCount = 0;
var root = new Ext.tree.AsyncTreeNode({
text:'Nigel\u0027s Menu',id:1,className:'com.aspicio.entity.Menu',allowDrag:false,leaf: false, children: [
{text:'Static Data',id:2,className:'com.aspicio.entity.Menu',allowDrag:true,leaf: false, children: [
{text:'Area/Postal/Zip Codes',id:3,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Class Control',id:4,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Companies',id:5,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'House Components',id:6,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Contacts',id:7,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'ContactTypes',id:8,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Countries',id:9,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Country sub-entities',id:10,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Currencies',id:11,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'DateInfo',id:12,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Economic Groups',id:13,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Languages',id:14,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Markets',id:15,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Main Menu Groupings',id:16,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Supply-Chain Players',id:17,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Player Types',id:18,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'TimeZones',id:19,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Users',id:20,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'User Groups',id:31,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true}
]},
{text:'Application Data',id:22,className:'com.aspicio.entity.Menu',allowDrag:true,leaf: false, children: [
{text:'Tax No Validations',id:32,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Application Classes',id:23,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Application Components',id:24,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true}
]},
{text:'Test Menu',id:33,className:'com.aspicio.entity.Menu',allowDrag:true,leaf: false, children: [
{text:'Application Classes',id:43,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Economic Groups',id:34,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Languages',id:35,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Test YUI Submenus',id:44,className:'com.aspicio.entity.Menu',allowDrag:true,leaf: false, children: [
{text:'Application Classes',id:45,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Application Components',id:46,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true}
]},
{text:'Markets',id:36,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Main Menu Groupings',id:37,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Supply-Chain Players',id:38,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true},
{text:'Player Types',id:39,className:'com.aspicio.entity.Menu',icon:'http://www.forwardcomputers.co.uk/images/FVlogosmall.jpg',allowDrag:true,leaf: true}
]}
]
});
tree.setRootNode(root);
tree.render();
/* Retrieve XML for the tree. */
function toXML(node, removeAutogenIds) {
var result = "\u003Cnode";
for (var att in node.attributes) {
var v = node.attributes[att];
if (typeof v != "object") {
if (att == 'id') {
if ((typeof v == "string") && (v.match(/^ynode/))) {
if (!removeAutogenIds) {
result += ' id="' + v + '"';
}
} else {
result += ' id="' + v + '"';
}
} else if (att == 'text') {
result += ' description="' + v + '"';
} else {
result += ' ' + att + '="' + v + '"';
}
}
}
result += '>
';
// Collect child nodes
if (!node.isLeaf()) {
var cs = node.childNodes;
for(var i = 0, len = cs.length; i < len; i++) {
result += toXML(cs[i], removeAutogenIds) + "
";
}
}
return result + "\u003c/node>";
}
Ext.get("button").on("click", function(){
alert(toXML(tree.getRootNode()));
});
});
</script>
</head>
<body>
<div id="menuContainer" style="height:500px;width:400px;margin-right:10px;overflow:auto;border:1px solid black"></div>
<button id="button">View XML</button>
</body>#
2
03-09-2007, 09:19 AM
The only way I've found is starting the tree with animate:false, then
root.expand(true);
root.collapse(true);
root.expand();
tree.animate = true;