您的位置:首页 > Web前端 > Node.js

关于EXTJS 树(tree)的demo包括AsyncTreeNode 加载数据

2011-05-15 10:42 369 查看
<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="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

/*简单的目录
var root = new Ext.tree.TreeNode({ id: "root", text: "跟节点" });//创建一个跟目录
var node1 = new Ext.tree.TreeNode({ id: "node1", text: "节点1" });//创建一个子节点
var node2 = new Ext.tree.TreeNode({ id: "node2", text: "节点2" });//创建子节点
var node3 = new Ext.tree.TreeNode({ id: "node3", text: "节点3" });
root.appendChild(node1);
root.appendChild(node2);
root.appendChild(node3);

var treePanel = new Ext.tree.TreePanel(
{
root:root,
width:300,
renderTo:"tree"
}

);
*/

var root = new Ext.tree.AsyncTreeNode({ id: "root", text: "跟节点" }); //创建AsyncTreeNode 必须和loader一起使用
var tree = new Ext.tree.TreePanel({
width:300,
renderTo: "tree",
root: root,
title:"异步加载数据",
loader: new Ext.tree.TreeLoader({ dataUrl: "treeList.aspx" })//

});

})

</script>
</head>
<body>
<div id="tree"></div>

</body>

特别注意treelist.aspx的数据格式:

[{id:"node1",text:"节点1",leaf:true},{id:"node2",text:"节点2",leaf:true},{id:"node3",text:"节点3",leaf:true}]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: