Tree with AsyncTreeNode - Ext JS

最新推荐文章于 2016-07-29 16:02:00 发布
最新推荐文章于 2016-07-29 16:02:00 发布 · 89 阅读 · 0
文章标签：

#EXT #CSS #YUI #JavaScript #XML #ViewUI

本文探讨了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
Ext.ux.tree.treegrid异步加载
11-10
root: new Ext.tree.AsyncTreeNode({ id: '0', loader: new Ext.tree.TreeLoader({ dataUrl: 'Data/Work_Task/Work_Task.aspx?flag=0', listeners: { "beforeload": function (treeLoader, node) { ...
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
10-31
text: 'yui-ext', draggable: false, id: rootId }); tree.setRootNode(root); // 根据当前节点ID动态拼接请求服务器的路径 tree.on('beforeload', function(node) { tree.loader.dataUrl = '...
关于EXTJS 树(tree)的demo包括AsyncTreeNode 加载数据
dianguanjiao7862的博客
05-15 199
<link href="ext-3.1.1/resources/css/ext-all.css" rel="Stylesheet" /> <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script> <script type="...
Tree non-async creation "bug" - Ext JS
laravel framework
04-20 89
When building a tree without using a treeloader, I can't seem to be able to specify the children of a node. Instead, I have to manually call "new Ext.tree.TreeNode()" for every node I want and then...
Alpha 2 treepanel rootVisible:false bug - Ext JS
laravel framework
04-19 164
as above, when declaring treepanel, if u set rootVisible:false, gives problems..... Regards   ...
Ext.tree.ColumnTree 应用
chuifuhuo6864的博客
07-29 271
HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &lt...
ajax-api-ext
liuwei9的博客
11-22 116
  Properties Methods Events Config Options Direct Link Observable Connection Ajax Class Ext.Ajax Package: Ext Defined In: Connection.js Class: Ajax Extends: Connection Global Ajax reques...
Ext tree
未来软件
04-24 1241
tree = new Ext.tree.TreePanel({ renderTo: 'CarListdiv', useArrows: true, border: true, frame: true,
extTree
zjqxr的专栏
04-12 124
YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤； 1.定义一个Tree对象： var tree = new Ext.tree.TreePanel('tree', { animate:true, loader: new Ext...
ExtJs_Ext.tree.TreePanel解释
cenyebao的专栏
09-28 6478
/*!  * Ext JS Library 3.3.0  */ /**  * @class Ext.tree.TreePanel  * @extends Ext.Panel  *   * The TreePanel provides(提供) tree-structu
ext-js基础
iteye_8614的博客
04-25 191
javascript的关键字 关键字（keywords) [quote]break else new case finally return void catch for switch while continue function this with default if throwdelete in try do instancesof typeof[/quote] var 在类或方法不...
treejson.json
04-14
省市区3级数据，ID为全国数据
洛克力量R8.4V2电脑DSP调音软件下载
07-23
洛克力量R8.4V2电脑DSP调音软件下载
C# Socket TCP服务器端通信源码：简单实用，支持多连接与多线程处理 Socket
07-23
内容概要：本文介绍了一段从商业级物联网项目中提取的C#编写的TCP服务器端通信源码。该源码采用静态类文件形式，内置双Socket和两个数据缓冲队列，支持多连接，能够无缝集成到各种C#项目中。它主要用于接收客户端通过互联网或局域网发送的数据，不包含数据处理逻辑，但提供了数据读取接口。代码结构简单清晰，易于理解和使用，适合初学者或有紧急项目需求的人群。文中还详细解析了代码架构、数据接收与处理机制，并指出了使用场景和注意事项。 适合人群：具备基本C#编程能力的研发人员，尤其是对Socket编程感兴趣的初学者或有紧急项目需求的开发者。 使用场景及目标：① 快速集成网络通信功能到C#项目中；② 接受客户端通过互联网或局域网发送的数据；③ 需要在短时间内实现简单的服务器端通信功能。 其他说明：该代码是非异步技术实现，适用于低并发场景。对于高并发需求或复杂数据处理的情况，需谨慎评估是否适用。同时，附带详细的技术文档，便于用户理解和集成。
ABAQUS盾构隧道开挖模型详解：一环七片、毫米单位制、含螺栓与配筋设计
07-23
内容概要：本文详细介绍了基于ABAQUS软件构建的盾构隧道开挖模型，重点讲解了一环七片的管片装配方法、螺栓连接设置以及钢筋笼处理技巧。文中强调了单位制的选择（毫米）、装配逻辑、螺栓预紧力加载顺序、钢筋布置参数化建模等方面的技术要点，并分享了作者在实际操作中的经验和常见错误避免方法。此外，还讨论了开挖步骤的设置及其重要性，确保模拟结果的准确性。 适合人群：从事土木工程、岩土工程、隧道工程等领域研究和技术应用的专业人士，尤其是熟悉ABAQUS软件并希望深入了解盾构隧道开挖模型的工程师。 使用场景及目标：适用于需要进行盾构隧道施工模拟的研究项目或工程项目，帮助工程师更好地理解和掌握盾构隧道开挖过程中涉及的各种力学行为和关键技术，提高模拟精度和可靠性。 其他说明：文章不仅提供了具体的代码片段用于指导具体操作，还分享了许多实践经验，有助于读者在实践中少走弯路，提升工作效率。
Huawei S12700-V200R019SPH3b0
07-23
Huawei S12700-V200R019SPH3b0，里面包含补丁说明书和补丁安装指导书，该补丁支持哪些型号，支持哪些版本可以安装当前补丁，请参考补丁说明书和补丁安装指导书。
实现 CUPT2025 中 LatoLato 实验的仿真模拟研究
07-23
资源下载链接为： https://pan.quark.cn/s/95f336ad1bf5 针对 Cupt2025 中的 LatoLato 实验仿真需求，现提供两种实现方案供参考： 该方案采用 Pybullet 物理引擎进行仿真开发。需要注意的是，此方案建议在 Linux 操作系统环境下运行，以确保仿真过程的稳定性和兼容性。Pybullet 作为一款开源的物理仿真引擎，具备精确的动力学计算能力，能够较好地模拟 LatoLato 实验中的物理运动状态，适合对仿真精度有较高要求的场景。 该方案采用 VPython 进行仿真开发，且为推荐方案。VPython 具有简洁易用的特点，其可视化效果直观，便于快速搭建仿真场景并实时观察实验过程。 在项目仓库中，已准备相关参考资料，这些资料来源于网络公开资源，可帮助开发者了解 LatoLato 实验的基本原理和仿真实现思路。同时，仓库中还包含本人制作的 PPT 文档，其中梳理了仿真实现的关键步骤和技术要点，可为开发过程提供具体指导。 两种方案均可实现 LatoLato 实验的仿真需求，开发者可根据自身技术熟悉程度和实际需求选择合适的方案。若追求开发效率和可视化效果，推荐优先考虑方案二；若对物理仿真精度有更高要求，且具备 Linux 环境使用经验，可选择方案一。
电动汽车充电机：900W1Kw双管正激可调电源充电机的设计与实现
最新发布
07-23
内容概要：本文详细介绍了900W或1Kw，20V-90V 10A双管正激可调电源充电机的研发过程和技术细节。首先阐述了项目背景，强调了充电机在电动汽车和可再生能源领域的重要地位。接着深入探讨了硬件设计方面，包括PCB设计、磁性器件的选择及其对高功率因数的影响。随后介绍了软件实现，特别是程序代码中关键的保护功能如过流保护的具体实现方法。此外，文中还提到了充电机所具备的各种保护机制，如短路保护、欠压保护、电池反接保护、过流保护和过温度保护，确保设备的安全性和可靠性。通讯功能方面，支持RS232隔离通讯，采用自定义协议实现远程监控和控制。最后讨论了散热设计的重要性，以及为满足量产需求所做的准备工作，包括提供详细的PCB图、程序代码、BOM清单、磁性器件和散热片规格书等源文件。 适合人群：从事电力电子产品研发的技术人员，尤其是关注电动汽车充电解决方案的专业人士。 使用场景及目标：适用于需要高效、可靠充电解决方案的企业和个人开发者，旨在帮助他们快速理解和应用双管正激充电机的设计理念和技术要点，从而加速产品开发进程。 其他说明：本文不仅涵盖了理论知识，还包括具体的工程实践案例，对于想要深入了解充电机内部构造和工作原理的人来说是非常有价值的参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值