<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 (){
/* Simple directory
Var root = new Ext. tree. TreeNode ({id: "root", text: "heel node"}); // create a directory
Var node1 = new Ext. tree. TreeNode ({id: "node1", text: "Node 1"}); // create a subnode
Var node2 = new Ext. tree. TreeNode ({id: "node2", text: "Node 2"}); // create a subnode
Var node3 = new Ext. tree. TreeNode ({id: "node3", text: "Node 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: "With node"}); // you must use AsyncTreeNode together with loader to create an AsyncTreeNode.
Var tree = new Ext. tree. TreePanel ({
Width: 300,
RenderTo: "tree ",
Root: root,
Title: "asynchronously loading data ",
Loader: new Ext. tree. TreeLoader ({dataUrl: "treeList. aspx "})//
});
})
</Script>
</Head>
<Body>
<Div id = "tree"> </div>
</Body>
Pay special attention to the data format of treelist. aspx:
[{Id: "node1", text: "Node 1", leaf: true}, {id: "node2", text: "Node 2", leaf: true }, {id: "node3", text: "Node 3", leaf: true}]