示例一：樹的一些常用配置屬性。
|
Ext.onReady(function(){
var loader=new Ext.tree.TreeLoader({ url:"treedata3.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, animate:false,//收縮動畫 autoHeight:true, //自動高度 enableDrag:true, //是否可以拖動 //enableDD:true, //drap和drop enableDrop:true, //放置節點 lines:false,//節點間虛線 rootVisible:false,//是否顯示根節點 trackMouseOver:true,//是否顯示經過時效果 useArrows:true//是否使用小箭頭 }); }) |
示例二：節點的一些常用配置屬性。
|
Ext.onReady(function(){ Ext.QuickTips.init();
var loader=new Ext.tree.TreeLoader({ url:"treedata3.js" });
var root=new Ext.tree.TreeNode({ id:"root", text:"根節點", checked:true, //true則在text前有個選中的複選框,false則text前有個未選中的複選框,默認沒有任何框框 expanded:true, //是否展開 qtip:"根節點", //提示信息 singleClickExpand:true //單擊文本展開 });
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 }); }) |
示例三：從JSP中獲得數據並構造動態樹。
|
Ext.onReady(function(){ //根節點 var root = new Ext.tree.AsyncTreeNode({ id:"root", text:"根節點", loader:new Ext.tree.TreeLoader({ url:"AsyncServer2.jsp" }) })
var treePanel = new Ext.tree.TreePanel({ renderTo:"AsyncTree", width:300, height:400, root:root }) }) |
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String tree = "[{id:'childnode1',text:'子節點',leaf:false}]"; response.getWriter().write(tree); %>
|
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% StringBuffer tree = new StringBuffer(); 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(){ //根節點 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:"TestTree11", width:300, height:400, root:root, bbar:[ { text:"獲得選擇的節點", handler:function(){ var sm = treePanel.getSelectionModel(); var sn = sm.getSelectedNode(); if(sn != null) { alert(sn.text); }else { alert("沒有選擇任何節點"); } } } ] }) }) |
示例五：選擇多個節點。
|
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:"TestTree11", width:300, height:400, root:root, selModel : new Ext.tree.MultiSelectionModel(), bbar:[ { text:"獲得選擇的節點", handler:function(){ var sm = treePanel.getSelectionModel(); var sn = sm.getSelectedNodes(); var length = sn.length; if(length != 0) { alert(length); }else { alert("沒有選擇任何節點"); } } } ] }) }) |
示例六：可編輯的樹。
|
new Ext.tree.TreeEditor(treePanel); |
示例七：按指定屬性進行排序。
|
new Ext.tree.TreeSorter(treePanel,{ property:"id" }) |
示例八：替換Tree中圖片。
|
Ext.onReady(function(){ //根節點 var root = new Ext.tree.TreeNode({ id:"root", text:"根節點", icon:"folder.jpg" })
root.on("click",function(){ root.getUI().getIconEl().src="folder2.jpg" });
//子節點 var childNode1 = new Ext.tree.TreeNode({ id:"chileNode1", text:"子節點1", icon:"folder.jpg" })
//孫子節點 var gChildNode1 = new Ext.tree.TreeNode({ id:"gChildNode1", text:"孫子節點1", icon:"folder.jpg" })
//孫子節點 var gChildNode2 = new Ext.tree.TreeNode({ id:"gChildNode2", text:"孫子節點2", icon:"folder.jpg" })
//孫子節點 var gChildNode3 = new Ext.tree.TreeNode({ id:"gChildNode3", text:"孫子節點3", icon:"folder.jpg" })
childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3);
//子節點 var childNode2 = new Ext.tree.TreeNode({ id:"chileNode3", text:"子節點2" })
//子節點 var childNode3 = new Ext.tree.TreeNode({ id:"chileNode2", text:"子節點3" })
root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3);
var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree11", width:300, height:400, root:root, selModel : new Ext.tree.MultiSelectionModel(), bbar:[ { text:"獲得選擇的節點", handler:function(){ var sm = treePanel.getSelectionModel(); var sn = sm.getSelectedNodes(); var length = sn.length; if(length != 0) { alert(length); }else { alert("沒有選擇任何節點"); } } } ] });
new Ext.tree.TreeSorter(treePanel,{ property:"id" }) }) |