示例一：树的一些常用配置属性。
|
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" }) }) |