示例一:最简单的树。
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 }); }) |