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
内容概要:本文详细介绍了如何使用STM32微控制器精确控制步进电机,涵盖了从原理到代码实现的全过程。首先,解释了步进电机的工作原理,包括定子、转子的构造及其通过脉冲信号控制转动的方式。接着,介绍了STM32的基本原理及其通过GPIO端口输出控制信号,配合驱动器芯片放大信号以驱动电机运转的方法。文中还详细描述了硬件搭建步骤,包括所需硬件的选择与连接方法。随后提供了基础控制代码示例,演示了如何通过定义控制引脚、编写延时函数和控制电机转动函数来实现步进电机的基本控制。最后,探讨了进阶优化技术,如定时器中断控制、S形或梯形加减速曲线、微步控制及DMA传输等,以提升电机运行的平稳性和精度。 适合人群:具有嵌入式系统基础知识,特别是对STM32和步进电机有一定了解的研发人员和技术爱好者。 使用场景及目标:①学习步进电机与STM32的工作原理及二者结合的具体实现方法;②掌握硬件连接技巧,确保各组件间正确通信;③理解并实践基础控制代码,实现步进电机的基本控制;④通过进阶优化技术的应用,提高电机控制性能,实现更精细和平稳的运动控制。 阅读建议:本文不仅提供了详细的理论讲解,还附带了完整的代码示例,建议读者在学习过程中动手实践,结合实际硬件进行调试,以便更好地理解和掌握步进电机的控制原理和技术细节。同时,对于进阶优化部分,可根据自身需求选择性学习,逐步提升对复杂控制系统的理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值