关于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}]
