《11.第十一讲：ExtJS组件之TreePanel(上).doc》由会员分享，可在线阅读，更多相关《11.第十一讲：ExtJS组件之TreePanel(上).doc（8页珍藏版）》请在金锄头文库上搜索。
1、示例一：最简单的树。Ext.onReady(function() Ext.BLANK_IMAGE_URL = ./Ext/resources/images/default/s.gif;Ext.QuickTips.init();/根节点var root = new Ext.tree.TreeNode(id:root,text:根节点);/添加子节点root.appendChild(new Ext.tree.TreeNode(id:child1,text:子节点1);var mytree = new Ext.tree.TreePanel(renderTo:hello,id:mytree, titl
2、e:树,width:200,height:300,root:root););示例二：有孙子节点的树Ext.onReady(function() Ext.BLANK_IMAGE_URL = ./Ext/resources/images/default/s.gif;Ext.QuickTips.init();/根节点var root = new Ext.tree.TreeNode(id:root,text:根节点);/添加子节点var childNode1 = new Ext.tree.TreeNode(id:childNode1,text:子节点1);var childNode2 = new Ex
3、t.tree.TreeNode(id:childNode2,text:子节点2);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);childNode2.appendChild(gChildNode1);childNode2.appendChild
4、(gChildNode2);childNode2.appendChild(gChildNode3);var childNode3 = new Ext.tree.TreeNode(id:childNode3,text:子节点3);root.appendChild(childNode1);root.appendChild(childNode2);root.appendChild(childNode3);var mytree = new Ext.tree.TreePanel(renderTo:hello,id:mytree, title:树,width:200,height:300,root:roo
5、t););示例三：时间处理Ext.onReady(function() Ext.BLANK_IMAGE_URL = ./Ext/resources/images/default/s.gif;Ext.QuickTips.init();/根节点var root = new Ext.tree.TreeNode(id:root,text:根节点);/添加子节点var childNode1 = new Ext.tree.TreeNode(id:childNode1,text:子节点1);var childNode2 = new Ext.tree.TreeNode(id:childNode2,text:子
6、节点2);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);childNode2.appendChild(gChildNode1);childNode2.appendChild(gChildNode2);childNode2.appendChild
7、(gChildNode3);var childNode3 = new Ext.tree.TreeNode(id:childNode3,text:子节点3);root.appendChild(childNode1);root.appendChild(childNode2);root.appendChild(childNode3);var mytree = new Ext.tree.TreePanel(renderTo:hello,id:mytree, title:树,width:200,height:300,root:root);mytree.on(click,function(node,eve
8、nt)alert(点击了+node.text);root.on(click,function(node,event)alert(点击了+node.text););示例四：带链接的树Ext.onReady(function() Ext.BLANK_IMAGE_URL = ./Ext/resources/images/default/s.gif;Ext.QuickTips.init();/根节点var root = new Ext.tree.TreeNode(id:root,text:北风网);/添加子节点var childNode1 = new Ext.tree.TreeNode(id:chil
9、dNode1,text:北风网首页,href:http:/,hrefTarget:_blank);var childNode2 = new Ext.tree.TreeNode(id:childNode2,text:北风网论坛,href:http:/,hrefTarget:_blank);var childNode3 = new Ext.tree.TreeNode(id:childNode3,text:北风网博客,href:http:/,hrefTarget:_blank);root.appendChild(childNode1);root.appendChild(childNode2);roo
10、t.appendChild(childNode3);var mytree = new Ext.tree.TreePanel(renderTo:hello,id:mytree, title:树,width:200,height:300,root:root););示例五：动态加载树Ext.onReady(function() Ext.BLANK_IMAGE_URL = ./Ext/resources/images/default/s.gif;Ext.QuickTips.init();/根节点var root = new Ext.tree.AsyncTreeNode(id:root,text:根节点
11、,loader:new Ext.tree.TreeLoader(url:treedata.js);var mytree = new Ext.tree.TreePanel(renderTo:hello,id:mytree, title:动态树,width:200,height:300,root:root););treedata.js： 注意必须为UTF-8id:childNode1,text:子节点,leaf:falseTreedata2.js： 注意必须为UTF-8id:childNode1,text:子节点1,leaf:true,id:childNode2,text:子节点2,leaf:true,id:childNode3,text:子节点3,leaf:trueTreedata3.js： 注意必须为UTF-8id:childNode1,text:子节点1,leaf:true,id:childNode2,text:子节点2,leaf:false,children:id:gChildNode1,text:孙子节点1,leaf:true,id:gChildNode2,text:孙子节点2,leaf:false,children:id:gChildNode1,text:曾孙子节点1,leaf:true,
