Extjs

旭龍 2013-02-16

展開(kāi)全文

1.簡(jiǎn)單的樹(shù)

效果圖

代碼

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
//True表示為面板是可收縮的，并自動(dòng)渲染一個(gè)展開(kāi)/收縮的輪換按鈕在頭部工具條
collapsible: true,
title: '標(biāo)題',//標(biāo)題文本
width: 200,
border : false,//表框
autoScroll: true,//自動(dòng)滾動(dòng)條
animate : true,//動(dòng)畫(huà)效果
rootVisible: true,//根節(jié)點(diǎn)是否可見(jiàn)
split: true,
tbar:[{
text:'展開(kāi)',
handler:function(){
tree.expandAll();
}
},'-',{
text:'折疊',
handler:function(){
tree.collapseAll();
tree.root.expand();
}
}],
listeners: {
click: function(node) {
//得到node的text屬性
Ext.Msg.alert('消息', '你點(diǎn)擊了: "' + node.attributes.text+"'");
}
}
});
var root = new Ext.tree.TreeNode({text:'我是根'});
var root_node1 = new Ext.tree.TreeNode({text:'我是根的1枝'});
var root_node2 = new Ext.tree.TreeNode({text:'我是根的2枝'});
//插入節(jié)點(diǎn)為該節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
root.appendChild(root_node1);
root.appendChild(root_node2);
//設(shè)置根節(jié)點(diǎn)
tree.setRootNode(root);
new Ext.Viewport({
items: [tree]
});
});
</script>

2.使用TreeLoader獲得后臺(tái)數(shù)據(jù)

[plain] view plain copy ?

每個(gè)節(jié)點(diǎn)最后一級(jí)必須是葉子節(jié)點(diǎn),否則會(huì)出現(xiàn)無(wú)限循環(huán)
TreeNode并不支持Ajax,需要把根節(jié)點(diǎn)換成AsyncTreeNode實(shí)現(xiàn)異步加載效果

list.txt

[plain] view plain copy ?

[{
text : '01',
children : [
{ text : '01-01' , leaf : true },
{ text : '01-02' , leaf : true }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true },
{ text : '02-02' , leaf : true }
]
}]

index.jsp

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
collapsible: true,
title: 'TreeLoader獲得后臺(tái)數(shù)據(jù)',
width: 200,
border : false,
autoScroll: true,
animate : true,
rootVisible: false,
split: true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'list.txt'
}),
root: new Ext.tree.AsyncTreeNode({
//進(jìn)入時(shí)是否展開(kāi)
expanded:false,
text:'根節(jié)點(diǎn)'
}),
listeners: {
afterrender: function(node) {
tree.expandAll();//展開(kāi)樹(shù)
}
}
});
new Ext.Viewport({
items: [tree]
});
});
</script>

3.讀取本地JSON數(shù)據(jù)

[javascript] view plain copy ?

因?yàn)橛械臉?shù)形的數(shù)據(jù)并不多,為了獲得如此少量的數(shù)據(jù)而使用Ajax訪問(wèn)后臺(tái)不劃算,
如果退回到每個(gè)節(jié)點(diǎn)都使用new來(lái)生成,又實(shí)在太麻煩,
那么能不能讓TreeLoader讀取本地的JavaScript中的JSON數(shù)據(jù),然后生成需要的樹(shù)節(jié)點(diǎn)呢

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
//True表示為面板是可收縮的，并自動(dòng)渲染一個(gè)展開(kāi)/收縮的輪換按鈕在頭部工具條
collapsible: true,
title: '標(biāo)題',//標(biāo)題文本
width: 200,
border : false,//表框
autoScroll: true,//自動(dòng)滾動(dòng)條
animate : true,//動(dòng)畫(huà)效果
rootVisible: false,//根節(jié)點(diǎn)是否可見(jiàn)
split: true,
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
text:'我是根',
children:[{
text : '01',
children : [
{ text : '01-01' , leaf : true },
{ text : '01-02' , leaf : true }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true },
{ text : '02-02' , leaf : true }
]
}]
}),
listeners: {
afterrender: function(node) {
tree.expandAll();//展開(kāi)樹(shù)
}
}
});
new Ext.Viewport({
items: [tree]
});
});
</script>

4.使用JSP提供后臺(tái)數(shù)據(jù)

[plain] view plain copy ?

樹(shù)形異步讀取的關(guān)鍵是node參數(shù),當(dāng)某一個(gè)節(jié)點(diǎn)展開(kāi)時(shí),treeLoader會(huì)根據(jù)設(shè)置的dataUrl去后臺(tái)讀取數(shù)據(jù),
而發(fā)送請(qǐng)求時(shí),treeLoader會(huì)把這個(gè)節(jié)點(diǎn)的Id作為參數(shù)一起發(fā)送到后臺(tái),對(duì)于后臺(tái)來(lái)說(shuō),只要獲取node參數(shù),
就知道是哪個(gè)節(jié)點(diǎn)正在執(zhí)行展開(kāi),
如果返回的子節(jié)點(diǎn)數(shù)據(jù)包含leaf:true屬性,AsyncTreeNode就會(huì)生成TreeNode節(jié)點(diǎn),并標(biāo)記為葉子

list.jsp

[javascript] view plain copy ?

<%@ page language="java" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//獲取node參數(shù),對(duì)應(yīng)的是正在展開(kāi)的節(jié)點(diǎn)id
String node = request.getParameter("node");
System.out.println("node="+node);
String json =
"["+
"{id:1,text:'01',"+
"children:["+
"{id:11,text:'01-01',leaf:true},"+
"{id:12,text:'01-02',leaf:true}"+
"]}"+
",{id:2,text:'02',"+
"children:["+
"{id:21,text:'02-01',leaf:true},"+
"{id:22,text:'02-02',leaf:true}"+
"]}"+
"]";
response.getWriter().write(json);
%>

index.jsp

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
collapsible: true,
title: '標(biāo)題',
width: 200,
border : false,
autoScroll: true,
animate : true,
rootVisible: false,
split: true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'list.jsp'
}),
root : new Ext.tree.AsyncTreeNode({
//設(shè)置id,讓后臺(tái)知道應(yīng)該在何時(shí)返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)
id : '0',
text : '我是根'
}),
listeners: {
afterrender: function(node) {
tree.expandAll();//展開(kāi)樹(shù)
}
}
});
new Ext.Viewport({
items: [tree]
});
});
</script>

5.樹(shù)的事件

[javascript] view plain copy ?

listeners: {
click: function(node) {
Ext.Msg.alert('消息', '你點(diǎn)擊了: "' + node.attributes.text);
},
dblclick:function(node){
alert('你雙擊了'+node);
},
expandnode:function(node){
alert(node+'展開(kāi)了'+node.attributes.text);
},
collapsenode:function(node){
alert(node+'折疊了'+node.attributes.text);
}
}

6.右邊菜單

效果圖

list.txt

[plain] view plain copy ?

[{
text : '01',
children : [
{ text : '01-01' , leaf : true },
{ text : '01-02' , leaf : true }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true },
{ text : '02-02' , leaf : true }
]
}]

index.jsp

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var node_id;
var tree = new Ext.tree.TreePanel({
region: 'center',
collapsible: true,
title: '右鍵菜單',
width: 200,
border : false,
animate : true,
rootVisible: false,
autoScroll: true,
split: true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'list.txt'
}),
root: new Ext.tree.AsyncTreeNode({
//設(shè)置id,讓后臺(tái)知道應(yīng)該在何時(shí)返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)
id : '0',
text : '我是根'
}),
listeners: {
afterrender: function(node) {
//展開(kāi)樹(shù)
tree.expandAll();
}
}
});
var cc = new Ext.menu.Menu({
items :[{
text: '增加',
handler : function(){
alert(node_id.attributes.text);
cc.hide();//隱藏
}
},{
text: '刪除',
handler : function(){
alert('刪除');
}
},{
text: '修改',
handler : function(){
alert('修改');
}
}]
});
tree.on('contextmenu',function(node,e){
e.preventDefault();//阻止瀏覽器默認(rèn)彈出功能菜單
node.select();//選中當(dāng)前節(jié)點(diǎn)
//var array = new Array(500,500);//可以自定義坐標(biāo)
var array = e.getXY();//獲取事件的頁(yè)面坐標(biāo)
cc.showAt(array);//在指定的位置顯示該菜單
node_id = node;
});
new Ext.Viewport({
items: [tree]
});
});
</script>

7.給樹(shù)節(jié)點(diǎn)設(shè)置圖片和超鏈接

list.txt

[plain] view plain copy ?

[{
text : '01',
children : [
{ text : '01-01' , leaf : true , icon : 'image/qq.jpg' },
{ text : '01-02' , leaf : true , href : 'http://www.baidu.com' }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true },
{ text : '02-02' , leaf : true }
]
}]

8.修改樹(shù)節(jié)點(diǎn)的標(biāo)題

list.txt

[plain] view plain copy ?

[{
text : '01',
children : [
{ text : '01-01' , leaf : true },
{ text : '01-02' , leaf : true }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true },
{ text : '02-02' , leaf : true }
]
}]

index.jsp

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
collapsible: true,
title: '修改節(jié)點(diǎn)標(biāo)題',
width: 200,
border : false,
animate : true,
rootVisible: false,
autoScroll: true,
split: true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'list.txt'
}),
root: new Ext.tree.AsyncTreeNode({
id : '0',
text : '我是根'
}),
listeners: {
afterrender: function(node) {
//展開(kāi)樹(shù)
tree.expandAll();
}
}
});
//為樹(shù)節(jié)點(diǎn)提供即時(shí)的編輯功能
var treeEditor = new Ext.tree.TreeEditor(tree,new Ext.form.TextField({
allowBlank : false
}));
/*
編輯器開(kāi)始初始化,但在修改值之前觸發(fā),
若事件句柄返回false則取消整個(gè)編輯事件
editor : treeEditor本身
value : 正被設(shè)置的值
*/
treeEditor.on('beforestartedit',function(editor,element,value){
var treeNode = editor.editNode;
var boolean = treeNode.isLeaf();
return boolean;
});
/*
完成修改后,按下Enter就會(huì)觸發(fā)這個(gè)事件,我們可以監(jiān)聽(tīng)函數(shù)得到修改后的數(shù)據(jù)
editor : treeEditor本身
value : 修改后的值
startValue : 改變后的值
*/
treeEditor.on('complete',function(editor,value,startValue){
alert('將要設(shè)置的值: '+editor.editNode.text+' 原來(lái)的值: '+startValue+" 改變后的值: "+value)
});
new Ext.Viewport({
items: [tree]
});
});
</script>

9.樹(shù)的拖放

[plain] view plain copy ?

如果讓樹(shù)節(jié)點(diǎn)可以自由拖放,創(chuàng)建TreePanel時(shí)設(shè)置enableDD:true即可
不過(guò)直接設(shè)置只能實(shí)現(xiàn)葉子與枝干和根之間的拖放,葉子不能拖放到葉子下

list.txt

[plain] view plain copy ?

[{
text : '01',
children : [
{ text : '01-01' , leaf : true },
{ text : '01-02' , leaf : true }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true },
{ text : '02-02' , leaf : true }
]
}]

inde.jsp

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
collapsible: true,
title: '樹(shù)的拖動(dòng)',
width: 200,
border : false,
animate : true,
rootVisible: false,
autoScroll: true,
split: true,
enableDD : true,//支持拖放
loader : new Ext.tree.TreeLoader({
dataUrl : 'list.txt'
}),
root: new Ext.tree.AsyncTreeNode({
id : '0',
text : '我是根'
}),
listeners: {
afterrender: function(node) {
//展開(kāi)樹(shù)
tree.expandAll();
}
}
});
new Ext.Viewport({
items: [tree]
});
});
</script>

9.1 節(jié)點(diǎn)拖放的三種形式

[plain] view plain copy ?

append 放下去節(jié)點(diǎn)會(huì)變成被砸中節(jié)點(diǎn)的子節(jié)點(diǎn),形成父子關(guān)系,綠色加號(hào)標(biāo)志
above 放下的節(jié)點(diǎn)與目標(biāo)節(jié)點(diǎn)是兄弟關(guān)系,放下去的節(jié)點(diǎn)排列在前,一個(gè)箭頭兩個(gè)短橫線
below 放下的節(jié)點(diǎn)與目標(biāo)節(jié)點(diǎn)是兄弟關(guān)系,放下去的節(jié)點(diǎn)排列在后,兩個(gè)短橫線一個(gè)箭頭

9.2葉子不能append

[javascript] view plain copy ?

tree.on('nodedragover',function(e){
//獲取事件的對(duì)象
var node = e.target;//當(dāng)鼠標(biāo)指針經(jīng)過(guò)的節(jié)點(diǎn)
if(node.leaf){
n.leaf = false;
}
return true;
});

9.3 判斷拖放的目標(biāo)

[javascript] view plain copy ?

tree.on('nodedrop',function(e){
Ext.Msg.alert('消息','我們的節(jié)點(diǎn) '+e.dropNode+' 掉到了 '+e.target+' 上,掉落方式是 '+ e.point);
});

10.樹(shù)的過(guò)濾器Ext.tree.TreeFilter

list.txt

[javascript] view plain copy ?

[{
text : '01',
children : [
{ text : '01-01' , leaf : true },
{ text : '01-02' , leaf : true }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true },
{ text : '02-02' , leaf : true }
]
}]

index.jsp

[javascript] view plain copy ?

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
collapsible: true,
title: 'tree過(guò)濾器',
width: 400,
border : false,
animate : true,
rootVisible: false,
autoScroll: true,
split: true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'list.txt'
}),
root : new Ext.tree.AsyncTreeNode({
//設(shè)置id,讓后臺(tái)知道應(yīng)該在何時(shí)返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)
id : '0',
text : '我是根'
}),
listeners: {
afterrender: function(node) {
//展開(kāi)樹(shù)
tree.expandAll();
}
},
tbar:[{
text:'顯示02',
handler:function(){
treeFiler.filter('02');//通過(guò)指定的屬性過(guò)濾數(shù)據(jù)
}
},'-',{
text:'顯示全部',
handler:function(){
treeFiler.clear();//清理現(xiàn)在的過(guò)濾
}
},'-',{
xtype : 'textfield',
//為HTML的input輸入字段激活鍵盤(pán)事件的代理
enableKeyEvents : true,
listeners : {
//這個(gè)事件只能在enableKeyEvents = true可用
keyup : function(e){
var t = this.getValue()
/****************過(guò)濾時(shí)應(yīng)該避開(kāi)葉子節(jié)點(diǎn)**********************/
//傳遞的字符串參數(shù)被正則表達(dá)式讀取
var es = Ext.escapeRe(t);
var re = new RegExp(es,'i');
//通過(guò)一個(gè)函數(shù)過(guò)濾,函數(shù)返回true,那么該節(jié)點(diǎn)將保留
treeFiler.filterBy(function(n){
return !n.isLeaf() || re.test(n.text);
});
/**********不匹配的葉子節(jié)點(diǎn)的父節(jié)點(diǎn)也隱藏**************/
hiddenPkgs =[];
//從該節(jié)點(diǎn)開(kāi)始逐層下報(bào)(Bubbles up)節(jié)點(diǎn),上報(bào)過(guò)程中對(duì)每個(gè)節(jié)點(diǎn)執(zhí)行指定的函數(shù)
tree.root.cascade(function(n){
//當(dāng)節(jié)點(diǎn)有子節(jié)點(diǎn)的時(shí)候n.ui.ctNode.offsetHeight大于3
if(!n.isLeaf()&&n.ui.ctNode.offsetHeight<3){
n.ui.hide();
hiddenPkgs.push(n);
}
});
}
}
}]
});
var treeFiler = new Ext.tree.TreeFilter(tree,{
clearBlank : true,//如果查詢的字符串為空字符串,就執(zhí)行clear()
//每次過(guò)濾之前先執(zhí)行clear()負(fù)責(zé)會(huì)在上次過(guò)濾結(jié)果的基礎(chǔ)上進(jìn)行查詢
autoClear : true
});
new Ext.Viewport({
items: [tree]
});
});
</script>

11.利用TreeSorter對(duì)樹(shù)進(jìn)行排序

[plain] view plain copy ?

TreeSorter是一個(gè)專門(mén)用來(lái)對(duì)樹(shù)節(jié)點(diǎn)進(jìn)行排序的工具
caseSensitive 區(qū)分大小寫(xiě),默認(rèn)為false不區(qū)分大小寫(xiě)
dir 排列方式
folderSort 將葉子節(jié)點(diǎn)排列到非葉子節(jié)點(diǎn)后面默認(rèn)為false
leafAttr 判斷葉子節(jié)點(diǎn)的標(biāo)志,默認(rèn)為leaf,如果node中存在leaf:true參數(shù),就認(rèn)為是葉子節(jié)點(diǎn)
property 根據(jù)節(jié)點(diǎn)屬性排序,默認(rèn)為text

代碼

[javascript] view plain copy ?

new Ext.tree.TreeSorter(tree,{
folderSort : true
});

12.樹(shù)形節(jié)點(diǎn)視圖 Ext.tree.TreeNodeUI

[plain] view plain copy ?

Ext.treeTreeNodeUI是生成Ext.tree.TreeNode實(shí)例時(shí)默認(rèn)使用的視圖組件.
在生成每一個(gè)Ext.tree.TreeNode實(shí)例時(shí),它會(huì)先查找this.attributes.uiProvider和this.defaultUI.
如果有任何一個(gè)屬性存在,它就會(huì)使用這個(gè)屬性創(chuàng)建自己的視圖.
如果這兩個(gè)屬性都不存在就會(huì)適應(yīng)Ext.tree.TreeNodeUI創(chuàng)建視圖.
因此,在屬性結(jié)構(gòu)中通常都使用Ext.tree.TreeNodeUI作為樹(shù)形節(jié)點(diǎn)的視圖.
可以通過(guò)node.ui的方式獲得某個(gè)Ext.tree.TreeNode實(shí)例對(duì)應(yīng)的Ext.tree.TreeNodeUI

效果圖

list.txt

[plain] view plain copy ?

[{
text : '01',
children : [
{ text : '01-01' , leaf : true , checked : false },
{ text : '01-02' , leaf : true , checked : false }
]
},{
text :'02',
children : [
{ text : '02-01' , leaf : true , checked : false },
{ text : '02-02' , leaf : true , checked : false }
]
}]

index.jsp

[javascript] view plain copy ?

<style type="text/css">
.big {
font-weight: bold;
}
</style>
<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region: 'center',
collapsible: true,
title: '樹(shù)形節(jié)點(diǎn)視圖',
width: 200,
border : false,
autoScroll: true,
animate : true,
rootVisible: false,
split: true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'list.txt'
}),
root : new Ext.tree.AsyncTreeNode({
//設(shè)置id,讓后臺(tái)知道應(yīng)該在何時(shí)返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)
id : '0',
text : '我是根'
}),
listeners: {
afterrender: function(node) {
//展開(kāi)樹(shù)
tree.expandAll();
}
}
});
new Ext.Viewport({
items: [tree]
});
tree.on('click',function(node){
//當(dāng)用戶點(diǎn)擊一個(gè)節(jié)點(diǎn),會(huì)獲得節(jié)點(diǎn)對(duì)應(yīng)的Ext.tree.TreeNodeUI實(shí)例
var treeNodeUI = node.ui;
//最后調(diào)用addClass()方法把文字轉(zhuǎn)化為粗體
treeNodeUI.addClass('big');
(
function(){
treeNodeUI.removeClass('big');
}
).defer(1000);
});
});
</script>

[plain] view plain copy ?

treeNodeUI的方法
getAnchor(),getIconEl(),getTextEl()這3個(gè)函數(shù)可以分別獲取頁(yè)面上與樹(shù)形對(duì)應(yīng)的
<a>標(biāo)簽,包含圖標(biāo)的<img>標(biāo)簽,包含文字的<span>標(biāo)簽部分
hide()和show()函數(shù)可以控制樹(shù)形節(jié)點(diǎn)是否隱藏
isChecked()和toggleCheck()函數(shù)可以判斷和修改樹(shù)形節(jié)點(diǎn)中的Checkbox的狀態(tài),這兩屬性必須節(jié)點(diǎn)包含Checkbox,否則isChecked()會(huì)一直返回false

13.表格與樹(shù)的結(jié)合 Ext.ux.tree.ColumnTree()

[plain] view plain copy ?

Ext.ux.tree.ColumnTree屬于EXT的擴(kuò)展件,為了使用Ext.ux.tree.ColumnTree,
我們首先需要引用Ext發(fā)布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三個(gè)文件
需要注意的是:我們要給每一個(gè)節(jié)點(diǎn)設(shè)置uiProvider:'col',這樣在生成樹(shù)時(shí)TreeLoader會(huì)預(yù)先定義的uiProviders參數(shù)中取得'col'對(duì)應(yīng)的Ext.ux.tree.ColumnNodeUI,用它來(lái)作為顯示樹(shù)形節(jié)點(diǎn)的視圖

效果圖

list.jsp

[javascript] view plain copy ?

<%@ page language="java" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//獲取node參數(shù),對(duì)應(yīng)的是正在展開(kāi)的節(jié)點(diǎn)id
String node = request.getParameter("node");
System.out.println("node="+node);
String json =
"["+
"{km:'深入淺出ExtJs',ks:'12month',js:'',uiProvider:'col',"+
"children:["+
"{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+
"{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+
"]}"+
",{km:'深入淺出Java',ks:'10month',js:'',uiProvider:'col',"+
"children:["+
"{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+
"{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+
"]}"+
"]";
response.getWriter().write(json);
%>

index.jsp

[javascript] view plain copy ?

<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/ColumnNodeUI.css"/>
<script type="text/javascript" src="<%=rootpath%>/ext/ux/ColumnNodeUI.js"></script>
<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var tree = new Ext.tree.ColumnTree({
//columnTree的寬度要等于columns列總和的寬度,否則會(huì)出現(xiàn)錯(cuò)行
width: 451,
height: 200,
rootVisible:false,
autoScroll:false,
title: '示例',
columns:[{
header:'科目',
width:230,
dataIndex:'km'
},{
header:'課時(shí)',
width:100,
dataIndex:'ks'
},{
header:'講師',
width:100,
dataIndex:'js'
}],
loader: new Ext.tree.TreeLoader({
dataUrl:'list.jsp',
uiProviders:{
'col': Ext.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
//設(shè)置id,讓后臺(tái)知道應(yīng)該在何時(shí)返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)
id : '0',
text:'我是根'
}),
listeners: {
afterrender: function(node) {
//展開(kāi)樹(shù)
tree.expandAll();
}
}
});
new Ext.Viewport({
items : [tree]
});
});
</script>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：旭龍 > 《tree》

舉報(bào)/認(rèn)領(lǐng)