Tree with AsyncTreeNode - Ext JS

本文探讨了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>
Reply With Quote
  #2  
Old 03-09-2007, 09:19 AM
Default

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;
Reply With Quote
内容概要:本文详细介绍了900W或1Kw,20V-90V 10A双管正激可调电源充电机的研发过程和技术细节。首先阐述了项目背景,强调了充电机在电动汽车和可再生能源领域的重要地位。接着深入探讨了硬件设计方面,包括PCB设计、磁性器件的选择及其对高功率因数的影响。随后介绍了软件实现,特别是程序代码中关键的保护功能如过流保护的具体实现方法。此外,文中还提到了充电机所具备的各种保护机制,如短路保护、欠压保护、电池反接保护、过流保护和过温度保护,确保设备的安全性和可靠性。通讯功能方面,支持RS232隔离通讯,采用自定义协议实现远程监控和控制。最后讨论了散热设计的重要性,以及为满足量产需求所做的准备工作,包括提供详细的PCB图、程序代码、BOM清单、磁性器件和散热片规格书等源文件。 适合人群:从事电力电子产品研发的技术人员,尤其是关注电动汽车充电解决方案的专业人士。 使用场景及目标:适用于需要高效、可靠充电解决方案的企业和个人开发者,旨在帮助他们快速理解和应用双管正激充电机的设计理念和技术要点,从而加速产品开发进程。 其他说明:本文不仅涵盖了理论知识,还包括具体的工程实践案例,对于想要深入了解充电机内部构造和工作原理的人来说是非常有价值的参考资料。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值