11.第十二讲ExtJS组件之TreePanel(下)

示例一：树的一些常用配置属性。Ext.onReady(function(){varloader=newExt.tree.TreeLoader({url:treedata.js});varroot=newExt.tree.TreeNode({id:root,text:根节点});root.appendChild(newExt.tree.TreeNode({id:child1,text:子节点1}));root.appendChild(newExt.tree.TreeNode({id:child2,text:子节点2}));vartree=newExt.tree.TreePanel({renderTo:TestTree,root:root,width:400,height:400,animate:false,//收缩动画autoHeight:true,//自动高度enableDrag:true,//是否可以拖动enabled:true,//drap和dropenableDrop:true,//放置节点lines:false,//节点间虚线//rootVisible:false,//是否显示根节点trackMouseOver:true,//是否进过时效果useArrows:true//是否使用小箭头});});2.Ext.onReady(function(){Ext.BLANK_IMAGE_URL=../Ext/resources/images/default/s.gif;Ext.QuickTips.init();//根节点varroot=newExt.tree.TreeNode({id:root,text:根节点});root.appendChild(newExt.tree.TreeNode({id:childNode,text:静态子节点1}))root.appendChild(newExt.tree.AsyncTreeNode({id:childNode2,text:静态子节点2,loader:newExt.tree.TreeLoader({url:treedata.js})}))varmytree=newExt.tree.TreePanel({renderTo:hello,id:mytree,title:动态树,width:200,height:300,root:root,animate:false,//收缩动画autoHeight:true,//自动高度enableDrag:true,//是否可以拖动//enabledDD:true,//drap和dropenableDrop:true,//放置节点//lines:false,//节点间虚线//rootVisible:false,//是否显示根节点//trackMouseOver:true,//是否进过时效果,默认时为trueuseArrows:true//是否使用小箭头});});示例二：节点的一些常用配置属性。Ext.onReady(function(){Ext.BLANK_IMAGE_URL=../Ext/resources/images/default/s.gif;Ext.QuickTips.init();varloader=newExt.tree.TreeLoader({url:treedata.js});varroot=newExt.tree.TreeNode({id:root,text:根节点,checked:true,//true则在text前有个选中的复选框，false则在text前有个选中的复选框，默认没有任何框框expanded:true,//是否展开qtip:根节点,//提示信息singleClickExpand:true//单击文本展开});root.appendChild(newExt.tree.TreeNode({id:child1,text:子节点1}))root.appendChild(newExt.tree.TreeNode({id:child2,text:子节点2}))root.appendChild(newExt.tree.AsyncTreeNode({id:child3,text:静态子节点3,loader:newExt.tree.TreeLoader({url:treedata.js})}))varmytree=newExt.tree.TreePanel({renderTo:hello,id:mytree,title:树,width:200,height:300,root:root});});2.Ext.onReady(function(){Ext.BLANK_IMAGE_URL=../Ext/resources/images/default/s.gif;Ext.QuickTips.init();//根节点varroot=newExt.tree.TreeNode({id:root,text:根节点,checked:true,//true则在text前有个选中的复选框，false则在text前有个选中的复选框，默认没有任何框框expanded:true,//是否展开qtip:根节点,//提示信息singleClickExpand:true//单击文本展开});root.appendChild(newExt.tree.TreeNode({id:childNode,text:静态子节点1}))root.appendChild(newExt.tree.AsyncTreeNode({id:childNode2,text:静态子节点2,loader:newExt.tree.TreeLoader({url:treedata.js})}))varmytree=newExt.tree.TreePanel({renderTo:hello,id:mytree,title:动态树,width:200,height:300,root:root,animate:false,//收缩动画autoHeight:true,//自动高度enableDrag:true,//是否可以拖动//enabledDD:true,//drap和dropenableDrop:true,//放置节点//lines:false,//节点间虚线//rootVisible:false,//是否显示根节点//trackMouseOver:true,//是否进过时效果,默认时为trueuseArrows:true//是否使用小箭头});});示例三：从JSP中获得数据并构造动态树。Ext.onReady(function(){Ext.BLANK_IMAGE_URL=../Ext/resources/images/default/s.gif;Ext.QuickTips.init();varroot=newExt.tree.AsyncTreeNode({id:root,text:根节点,loader:newExt.tree.TreeNode({url:AsyncServer2.jsp})});vartreePanel=newExt.tree.TreePanel({renderTo:hello,title:树,width:200,height:300,root:root});});JSP：%@pagelanguage=javaimport=java.util.*pageEncoding=utf-8%%Stringstr=[{id:'childNode',text:'动态子节点',leaf:false}];response.getWriter().write(str);%2.Ext.onReady(function(){Ext.BLANK_IMAGE_URL=../Ext/resources/images/default/s.gif;Ext.QuickTips.init();//根节点varroot=newExt.tree.TreeNode({id:root,text:根节点,checked:true,//true则在text前有个选中的复选框，false则在text前有个选中的复选框，默认没有任何框框expanded:true,//是否展开qtip:根节点,//提示信息singleClickExpand:true//单击文本展开});root.appendChild(newExt.tree.TreeNode({id:childNode,text:静态子节点1}))root.appendChild(newExt.tree.AsyncTreeNode({id:childNode2,text:静态子节点2,loader:newExt.tree.TreeLoader({url:nodeServer.jsp})}))varmytree=newExt.tree.TreePanel({renderTo:hello,id:mytree,title:动态树,width:200,height:300,root:root,enableDrag:true,//是否可以拖动enabledDD:true,//drap和dropenableDrop:true//放置节点});});JSP2：%@pagelanguage=javaimport=java.util.*pageEncoding=utf-8%%StringBuffertree=newStringBuffer();tree.append([);tree.append({text:'子节点1',id:'son1',leaf:true},);tree.append({text:'子节点2',id:'son2',leaf:true},);tree.append({text:'子节点3',id:'son3',leaf:true});tree.append(]);response.getWriter().write(tree.toString());%示例四：TreeSelectionModel选择模型Ext.onReady(function(){Ext.BLANK_IMAGE_URL=../Ext/resources/images/default/s.gif;Ext.QuickTips.init();//根节点varroot=newExt.tree.TreeNode({id:root,text:根节点,checked:true,//true则在text前有个选中的复选框，false则在text前有个选中的复选框，默认没有任何框框expanded:true,//是否展开qtip:根节点,//提示信息singleClickExpand:true//单击文本展开});root.appendChild(newExt.tree.TreeNode({id:childNode,text:静态子节点1}))root.appendChild(newExt.tree.AsyncTreeNode({id:childNode2,text:静态子节点2,loader:newExt.tree.TreeLoader({url:nodeServer2.jsp})}))varmytree=newExt.tree.TreePanel({renderTo:hello,id:mytree,title:动态树,width:200,height:300,root:root,enableDrag:true,//是否可以拖动enabledDD:true,//drap和dropenableDrop:true,//放置节点bbar:[{text:获得选择的节点,handler:function(){varsm=mytree.getSelectionModel();varsn=sm.getSelectedNode();if(sn!=null){alert(sn.text);}else{alert:没