TreePanel基本配置參數:
1.animate:true//展開,收縮動畫,false時,則沒有動畫效果
2.autoHeight:true//自動高度,默認爲false
3.enableDrag:true//樹的節點可以拖動Drag(效果上是),注意不是Draggable
4.enableDD:true//不僅可以拖動,還可以通過Drag改變節點的層次結構(drap和drop)
5.enableDrop:true//僅僅drop
6.lines:true//節點間的虛線條
7.loader:Ext.tree.TreeLoader//加載節點數據
8.root:Ext.tree.TreeNode//根節點
9.rootVisible:false//false不顯示根節點,默認爲true
10.trackMouseOver:false//false則mouseover無效果
11.useArrows:true//小箭頭
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/extBase/resources/css/ext-all.css" />
<script type="text/javascript" src="/extBase/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extBase/ext-all.js"></script>
<title>simple tree1</title>
<script type="text/javascript">
/**
創建一個簡單(靜態)的樹
*/
function createSimpleTreePanel(){
//因爲每個樹中由N個節點組成的,所以要創建樹,必須創建樹所包含的節點(樹必須有一個或多個根節點).
var vRoot = new Ext.tree.TreeNode({text: '根節點1'}) ;//創建節點
var vNode1 = new Ext.tree.TreeNode({text: '子節點1'}) ;//創建節點
vNode1.appendChild(new Ext.tree.TreeNode({text: '子節點11'}));
vNode1.appendChild(new Ext.tree.TreeNode({text: '子節點12'}));
var vNode2 = new Ext.tree.TreeNode({text: '子節點1'}) ;//創建節點
vRoot.appendChild(vNode1) ;//在vRoot根節點上創建子節點.
vRoot.appendChild(vNode2) ;//在vRoot根節點上創建子節點.
var vTree = new Ext.tree.TreePanel({//創建一個用於裝載樹的面板
renderTo: document.body,//綁定在body元素上.
width: 300,
style:"margin:30",
height: 200,
root: vRoot
});
}
/**
創建異步簡單樹
*/
function createSimpleTreeLoader(){
//創建一個由treeLoader.js定義的節點結構[{...},{...}]
var vNode = new Ext.tree.TreeLoader({url:'/eg/base/tree/treeLoader.jsp'});
//創建一個根節點,將上面定義的子節點結構與根節點綁定.
var vRoot = new Ext.tree.AsyncTreeNode({text: '根節點',loader:vNode}) ;
var vTree = new Ext.tree.TreePanel({//創建一個用於裝載樹的面板
renderTo: document.body,//綁定在body元素上.
style:"margin:30",
width: 300,
height: 200,
root: vRoot//綁定根節點.
});
}
/**
創建動態(從JSP文件動態載入)樹
*/
function createSimpleDynamicTreeLoader(){
//創建一個節點,節點的結構由JSP文件提供
var vNode = new Ext.tree.TreeLoader({url:'treeLoader.jsp'});
//爲該節點添加beforeload(點擊節點之前觸發)事件監聽器.
vNode.on("beforeload",function(myLoader,node){
//myLoader.baseParams.parentId是爲treeLoader.jsp傳遞參數,參數名爲parentId,可以自己取名.node代表正要點擊的節點對象
myLoader.baseParams.parentId = node.id=='root'?"":node.id;
}) ;
var vRoot = new Ext.tree.AsyncTreeNode({id: 'root',text: '根節點',loader: vNode}) ;
var vTree = new Ext.tree.TreePanel({//創建一個用於裝載樹的面板
renderTo: document.body,//綁定在body元素上.
enableDD:true,//不僅可以拖動,還可以通過Drag改變節點的層次結構(drap和drop)
width: 300,
style:"margin:30",
height: 200,
root: vRoot//綁定根節點.
});
}
Ext.onReady(function(){
//createSimpleTreePanel();
//createSimpleTreeLoader();
createSimpleDynamicTreeLoader();
});
</script>
</head>
<body>
</body>
</html>
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String parentId = request.getParameter("parentId") ;
System.out.println(parentId) ;
if("".equals(parentId) || parentId==null){
out.print("[{id:\'bj\',text:\'北京\'},"+"{id:\'ll\',text:'遼寧'}]");
}else if("bj".equals(parentId)){
out.print("[{text: \'朝陽\',leaf: true},"+"{text: '東城',leaf: true}]");
}else if("ll".equals(parentId)){
out.print("[{text: \'瀋陽\',leaf: true},"+"{text: '大連',leaf: true}]");
}
%>