Tree with AsyncTreeNode - Ext JS

最新推荐文章于 2016-07-29 16:02:00 发布

iteye_3946

最新推荐文章于 2016-07-29 16:02:00 发布

阅读量89

点赞数

分类专栏： extJs 文章标签： EXT CSS YUI JavaScript XML ViewUI

extJs 专栏收录该内容

281 篇文章

订阅专栏

本文探讨了ExtJS中树组件(TreePanel)的加载问题，特别是如何在不手动展开所有节点的情况下实现整个树的加载。提供了具体的代码示例并讨论了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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?

<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 += '>\n';

//		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) + "\n";
	        }
	    }
        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>

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;