Tree with AsyncTreeNode - Ext JS

9748 단어 JavaScript xml css ext yui

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

//		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;

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ASP.NET는 원래 페이지 인스턴스 코드를 닫지 않고 새 페이지를 엽니다.

Asp.net Core 2.0 OpenId Connect Handler에 Claims가 없습니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다