第十一讲：ExtJS组件之TreePanel(上)

示例一：最简单的树。

Ext.onReady(function(){ //根节点 var root = new Ext.tree.TreeNode({ id:"root", text:"根节点" })   //添加子节点 root.appendChild(new Ext.tree.TreeNode({ id:"child1", text:"子节点1" }))   var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree", width:100, height:100, root:root }) })

示例二：有孙子节点的树。

Ext.onReady(function(){ //根节点 var root = new Ext.tree.TreeNode({ id:"root", text:"根节点" })   //子节点 var childNode1 = new Ext.tree.TreeNode({ id:"chileNode1", text:"子节点1" })   //孙子节点 var gChildNode1 = new Ext.tree.TreeNode({ id:"gChildNode1", text:"孙子节点1" })   //孙子节点 var gChildNode2 = new Ext.tree.TreeNode({ id:"gChildNode2", text:"孙子节点2" })   //孙子节点 var gChildNode3 = new Ext.tree.TreeNode({ id:"gChildNode3", text:"孙子节点3" })   childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3);   //子节点 var childNode2 = new Ext.tree.TreeNode({ id:"chileNode2", text:"子节点2" })   //子节点 var childNode3 = new Ext.tree.TreeNode({ id:"chileNode3", text:"子节点3" })   root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3);   var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree", width:300, height:400, root:root }) })

示例三：事件处理。

Ext.onReady(function(){ //根节点 var root = new Ext.tree.TreeNode({ id:"root", text:"根节点" })   //添加子节点 root.appendChild(new Ext.tree.TreeNode({ id:"child1", text:"子节点1" }))   var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree", width:400, height:300, root:root });   //事件处理 treePanel.on("click",function(node,event){ alert("点击了" + node.text); })   root.on("click",function(node,event){ alert("点击了" + node.text); }) })

示例四：带链接的树。

Ext.onReady(function(){ //根节点 var root = new Ext.tree.TreeNode({ id:"root", text:"北风网" })   //添加子节点 root.appendChild(new Ext.tree.TreeNode({ id:"child1", text:"北风网首页", href:"http://www.ibeifeng.com", hrefTarget:"_blank" }))   //添加子节点 root.appendChild(new Ext.tree.TreeNode({ id:"child2", text:"北风网论坛首页", href:"http://bbs.ibeifeng.com", hrefTarget:"_blank" }))   var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree", width:400, height:300, root:root }); })

示例五：动态加载树。

Ext.onReady(function(){   var loader=new Ext.tree.TreeLoader({ url:"treedata.js" });   var root=new Ext.tree.AsyncTreeNode({ id:"root", text:"根节点", loader:loader });   var tree=new Ext.tree.TreePanel({ renderTo:"TestTree", root:root, width:400, height:400 }); })

[ { id:"childnode1", text:"子节点", leaf:false } ]

[ { id:"childnode1", text:"子节点1", leaf:true }, { id:"childnode2", text:"子节点2", leaf:true }, { id:"childnode3", text:"子节点3", leaf:true } ]

[ { id:"childnode1", text:"子节点1", leaf:true }, { id:"childnode2", text:"子节点2", leaf:false, children:[ { id:"gchildnode1", text:"孙子节点1", leaf:true }, { id:"gchildnode2", text:"孙子节点2", leaf:true } ] }, { id:"childnode3", text:"子节点3", leaf:true } ]

示例六：动态节点和静态节点混用。

Ext.onReady(function(){   var loader=new Ext.tree.TreeLoader({ url:"treedata.js" });   var root=new Ext.tree.TreeNode({ id:"root", text:"根节点" });   root.appendChild(new Ext.tree.TreeNode({ id:"child1", text:"子节点1" }))   root.appendChild(new Ext.tree.AsyncTreeNode({ id:"child2", text:"子节点2", loader:loader }))   var tree=new Ext.tree.TreePanel({ renderTo:"TestTree", root:root, width:400, height:400 }); })