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

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

2013-12-18 10:08 369 查看

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

<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}]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航