日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

Extjs

 旭龍 2013-02-16

1.簡單的樹

效果圖

代碼

[javascript] view plaincopy?
  1. <script type="text/javascript" defer>  
  2.     Ext.onReady(function(){  
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
  4.         var tree = new Ext.tree.TreePanel({  
  5.             region: 'center',  
  6.             //True表示為面板是可收縮的，并自動渲染一個展開/收縮的輪換按鈕在頭部工具條  
  7.             collapsible: true,  
  8.             title: '標(biāo)題',//標(biāo)題文本  
  9.             width: 200,  
  10.             border : false,//表框  
  11.             autoScroll: true,//自動滾動條  
  12.             animate : true,//動畫效果  
  13.             rootVisible: true,//根節(jié)點(diǎn)是否可見  
  14.             split: true,  
  15.             tbar:[{  
  16.                 text:'展開',  
  17.                 handler:function(){  
  18.                         tree.expandAll();  
  19.                 }  
  20.             },'-',{  
  21.                 text:'折疊',  
  22.                 handler:function(){  
  23.                     tree.collapseAll();  
  24.                     tree.root.expand();  
  25.                 }  
  26.             }],  
  27.             listeners: {  
  28.                 click: function(node) {  
  29.                     //得到node的text屬性  
  30.                     Ext.Msg.alert('消息', '你點(diǎn)擊了: "' + node.attributes.text+"'");  
  31.                 }  
  32.             }  
  33.         });  
  34.         var root = new Ext.tree.TreeNode({text:'我是根'});  
  35.         var root_node1 = new Ext.tree.TreeNode({text:'我是根的1枝'});  
  36.         var root_node2 = new Ext.tree.TreeNode({text:'我是根的2枝'});  
  37.         //插入節(jié)點(diǎn)為該節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)  
  38.         root.appendChild(root_node1);  
  39.         root.appendChild(root_node2);  
  40.         //設(shè)置根節(jié)點(diǎn)  
  41.         tree.setRootNode(root);  
  42.         new Ext.Viewport({  
  43.             items: [tree]  
  44.         });  
  45.     });  
  46. </script>  

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

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

list.txt

  1. [{    
  2.         text : '01',    
  3.         children : [    
  4.             { text : '01-01' , leaf : true },  
  5.             { text : '01-02' , leaf : true }    
  6.         ]    
  7.     },{    
  8.         text :'02',    
  9.         children : [    
  10.             { text : '02-01' , leaf : true },  
  11.             { text : '02-02' , leaf : true }  
  12.         ]  
  13. }]  
index.jsp
[javascript] view plaincopy?
  1. <script type="text/javascript" defer>  
  2.     Ext.onReady(function(){  
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
  4.         var tree = new Ext.tree.TreePanel({  
  5.             region: 'center',  
  6.             collapsible: true,  
  7.             title: 'TreeLoader獲得后臺數(shù)據(jù)',  
  8.             width: 200,  
  9.             border : false,  
  10.             autoScroll: true,  
  11.             animate : true,  
  12.             rootVisible: false,  
  13.             split: true,  
  14.             loader : new Ext.tree.TreeLoader({  
  15.                 dataUrl : 'list.txt'  
  16.             }),  
  17.             root: new Ext.tree.AsyncTreeNode({  
  18.                 //進(jìn)入時是否展開  
  19.                 expanded:false,  
  20.                 text:'根節(jié)點(diǎn)'  
  21.             }),  
  22.             listeners: {      
  23.                 afterrender: function(node) {      
  24.                     tree.expandAll();//展開樹   
  25.                 }      
  26.             }  
  27.         });  
  28.         new Ext.Viewport({  
  29.             items: [tree]  
  30.         });  
  31.     });  
  32. </script>  
3.讀取本地JSON數(shù)據(jù)

[javascript] view plaincopy?
  1. 因為有的樹形的數(shù)據(jù)并不多,為了獲得如此少量的數(shù)據(jù)而使用Ajax訪問后臺不劃算,  
  2. 如果退回到每個節(jié)點(diǎn)都使用new來生成,又實在太麻煩,  
  3. 那么能不能讓TreeLoader讀取本地的JavaScript中的JSON數(shù)據(jù),然后生成需要的樹節(jié)點(diǎn)呢  

[javascript] view plaincopy?
  1. <script type="text/javascript" defer>    
  2.     Ext.onReady(function(){    
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';    
  4.         var tree = new Ext.tree.TreePanel({    
  5.             region: 'center',    
  6.             //True表示為面板是可收縮的，并自動渲染一個展開/收縮的輪換按鈕在頭部工具條    
  7.             collapsible: true,    
  8.             title: '標(biāo)題',//標(biāo)題文本    
  9.             width: 200,    
  10.             border : false,//表框    
  11.             autoScroll: true,//自動滾動條    
  12.             animate : true,//動畫效果    
  13.             rootVisible: false,//根節(jié)點(diǎn)是否可見    
  14.             split: true,    
  15.             loader : new Ext.tree.TreeLoader(),    
  16.             root : new Ext.tree.AsyncTreeNode({    
  17.                 text:'我是根',    
  18.                 children:[{    
  19.                     text : '01',    
  20.                     children : [    
  21.                         { text : '01-01' , leaf : true },  
  22.                         { text : '01-02' , leaf : true }    
  23.                     ]    
  24.                 },{    
  25.                     text :'02',    
  26.                     children : [    
  27.                         { text : '02-01' , leaf : true },  
  28.                         { text : '02-02' , leaf : true }  
  29.                     ]  
  30.                 }]    
  31.             }),  
  32.             listeners: {        
  33.                 afterrender: function(node) {        
  34.                     tree.expandAll();//展開樹     
  35.                 }        
  36.             }     
  37.         });    
  38.         new Ext.Viewport({    
  39.             items: [tree]    
  40.         });    
  41.     });    
  42. </script>  
4.使用JSP提供后臺數(shù)據(jù)

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

list.jsp

[javascript] view plaincopy?
  1. <%@ page language="java"  pageEncoding="UTF-8"%>  
  2. <%     
  3.     request.setCharacterEncoding("UTF-8");  
  4.     response.setCharacterEncoding("UTF-8");  
  5.     //獲取node參數(shù),對應(yīng)的是正在展開的節(jié)點(diǎn)id  
  6.     String node = request.getParameter("node");  
  7.     System.out.println("node="+node);  
  8.     String json =  
  9.     "["+  
  10.     "{id:1,text:'01',"+  
  11.         "children:["+  
  12.             "{id:11,text:'01-01',leaf:true},"+  
  13.             "{id:12,text:'01-02',leaf:true}"+  
  14.          "]}"+  
  15.     ",{id:2,text:'02',"+  
  16.         "children:["+  
  17.             "{id:21,text:'02-01',leaf:true},"+  
  18.             "{id:22,text:'02-02',leaf:true}"+  
  19.          "]}"+  
  20.     "]";  
  21.     response.getWriter().write(json);  
  22. %>  

index.jsp

[javascript] view plaincopy?
  1. <script type="text/javascript" defer>  
  2.     Ext.onReady(function(){  
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
  4.         var tree = new Ext.tree.TreePanel({  
  5.             region: 'center',    
  6.             collapsible: true,    
  7.             title: '標(biāo)題',     
  8.             width: 200,    
  9.             border : false,   
  10.             autoScroll: true,     
  11.             animate : true,    
  12.             rootVisible: false,   
  13.             split: true,  
  14.             loader : new Ext.tree.TreeLoader({  
  15.                 dataUrl : 'list.jsp'  
  16.             }),  
  17.             root : new Ext.tree.AsyncTreeNode({  
  18.                 //設(shè)置id,讓后臺知道應(yīng)該在何時返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)  
  19.                 id : '0',  
  20.                 text : '我是根'  
  21.             }),  
  22.             listeners: {      
  23.                 afterrender: function(node) {      
  24.                     tree.expandAll();//展開樹   
  25.                 }      
  26.             }  
  27.         });  
  28.         new Ext.Viewport({  
  29.             items: [tree]  
  30.         });  
  31.     });  
  32. </script>  
5.樹的事件

[javascript] view plaincopy?
  1. listeners: {  
  2.     click: function(node) {  
  3.         Ext.Msg.alert('消息', '你點(diǎn)擊了: "' + node.attributes.text);  
  4.          
  5.     },  
  6.     dblclick:function(node){  
  7.         alert('你雙擊了'+node);  
  8.     },  
  9.     expandnode:function(node){  
  10.         alert(node+'展開了'+node.attributes.text);  
  11.     },  
  12.     collapsenode:function(node){  
  13.         alert(node+'折疊了'+node.attributes.text);  
  14.     }  
  15. }  

6.右邊菜單

效果圖

list.txt

  1. [{    
  2.         text : '01',    
  3.         children : [    
  4.             { text : '01-01' , leaf : true },  
  5.             { text : '01-02' , leaf : true }    
  6.         ]    
  7.     },{    
  8.         text :'02',    
  9.         children : [    
  10.             { text : '02-01' , leaf : true },  
  11.             { text : '02-02' , leaf : true }  
  12.         ]  
  13. }]  
index.jsp
[javascript] view plaincopy?
  1. <script type="text/javascript" defer>  
  2.     Ext.onReady(function(){  
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
  4.         var node_id;  
  5.         var tree = new Ext.tree.TreePanel({  
  6.             region: 'center',  
  7.             collapsible: true,  
  8.             title: '右鍵菜單',  
  9.             width: 200,  
  10.             border : false,  
  11.             animate : true,  
  12.             rootVisible: false,  
  13.             autoScroll: true,  
  14.             split: true,  
  15.             loader : new Ext.tree.TreeLoader({  
  16.                 dataUrl : 'list.txt'  
  17.             }),  
  18.             root: new Ext.tree.AsyncTreeNode({  
  19.                 //設(shè)置id,讓后臺知道應(yīng)該在何時返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)     
  20.                 id : '0',    
  21.                 text : '我是根'  
  22.             }),  
  23.             listeners: {      
  24.                 afterrender: function(node) {      
  25.                         //展開樹      
  26.                         tree.expandAll();  
  27.                     }      
  28.                }  
  29.         });  
  30.         var cc = new Ext.menu.Menu({  
  31.             items :[{  
  32.                 text: '增加',  
  33.                 handler : function(){  
  34.                     alert(node_id.attributes.text);  
  35.                     cc.hide();//隱藏  
  36.                 }  
  37.             },{  
  38.                 text: '刪除',  
  39.                 handler : function(){  
  40.                     alert('刪除');  
  41.                 }  
  42.             },{  
  43.                 text: '修改',  
  44.                 handler : function(){  
  45.                     alert('修改');  
  46.                 }  
  47.             }]  
  48.         });  
  49.         tree.on('contextmenu',function(node,e){  
  50.             e.preventDefault();//阻止瀏覽器默認(rèn)彈出功能菜單  
  51.             node.select();//選中當(dāng)前節(jié)點(diǎn)  
  52.             //var array = new Array(500,500);//可以自定義坐標(biāo)  
  53.             var array = e.getXY();//獲取事件的頁面坐標(biāo)  
  54.             cc.showAt(array);//在指定的位置顯示該菜單  
  55.             node_id = node;  
  56.         });  
  57.         new Ext.Viewport({  
  58.             items: [tree]  
  59.         });  
  60.     });  
  61. </script>  
7.給樹節(jié)點(diǎn)設(shè)置圖片和超鏈接

list.txt

  1. [{    
  2.         text : '01',    
  3.         children : [    
  4.             { text : '01-01' , leaf : true , icon : 'image/qq.jpg' },  
  5.             { text : '01-02' , leaf : true , href : 'http://www.baidu.com' }    
  6.         ]    
  7.     },{    
  8.         text :'02',    
  9.         children : [    
  10.             { text : '02-01' , leaf : true },  
  11.             { text : '02-02' , leaf : true }  
  12.         ]  
  13. }]  
8.修改樹節(jié)點(diǎn)的標(biāo)題

list.txt

  1. [{    
  2.         text : '01',    
  3.         children : [    
  4.             { text : '01-01' , leaf : true },  
  5.             { text : '01-02' , leaf : true }    
  6.         ]    
  7.     },{    
  8.         text :'02',    
  9.         children : [    
  10.             { text : '02-01' , leaf : true },  
  11.             { text : '02-02' , leaf : true }  
  12.         ]  
  13. }]  
index.jsp
[javascript] view plaincopy?
  1. <script type="text/javascript" defer>    
  2.     Ext.onReady(function(){    
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';    
  4.         var tree = new Ext.tree.TreePanel({    
  5.             region: 'center',    
  6.             collapsible: true,    
  7.             title: '修改節(jié)點(diǎn)標(biāo)題',   
  8.             width: 200,    
  9.             border : false,  
  10.             animate : true,  
  11.             rootVisible: false,  
  12.             autoScroll: true,  
  13.             split: true,    
  14.             loader : new Ext.tree.TreeLoader({    
  15.                 dataUrl : 'list.txt'    
  16.             }),    
  17.             root: new Ext.tree.AsyncTreeNode({    
  18.                 id : '0',      
  19.                 text : '我是根'    
  20.             }),  
  21.             listeners: {      
  22.                 afterrender: function(node) {      
  23.                    //展開樹      
  24.                    tree.expandAll();      
  25.                 }  
  26.             }    
  27.         });    
  28.             
  29.         //為樹節(jié)點(diǎn)提供即時的編輯功能    
  30.         var treeEditor = new Ext.tree.TreeEditor(tree,new Ext.form.TextField({    
  31.             allowBlank : false    
  32.         }));    
  33.         /*  
  34.             編輯器開始初始化,但在修改值之前觸發(fā),  
  35.             若事件句柄返回false則取消整個編輯事件  
  36.             editor : treeEditor本身  
  37.             value : 正被設(shè)置的值  
  38.         */    
  39.         treeEditor.on('beforestartedit',function(editor,element,value){    
  40.             var treeNode = editor.editNode;    
  41.             var boolean  = treeNode.isLeaf();    
  42.             return boolean;    
  43.         });    
  44.         /*  
  45.             完成修改后,按下Enter就會觸發(fā)這個事件,我們可以監(jiān)聽函數(shù)得到修改后的數(shù)據(jù)  
  46.             editor : treeEditor本身  
  47.             value : 修改后的值  
  48.             startValue : 改變后的值  
  49.         */    
  50.         treeEditor.on('complete',function(editor,value,startValue){    
  51.             alert('將要設(shè)置的值: '+editor.editNode.text+' 原來的值: '+startValue+" 改變后的值: "+value)    
  52.         });    
  53.             
  54.         new Ext.Viewport({    
  55.             items: [tree]    
  56.         });    
  57.     });    
  58. </script>  
9.樹的拖放

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

list.txt

  1. [{    
  2.         text : '01',    
  3.         children : [    
  4.             { text : '01-01' , leaf : true },  
  5.             { text : '01-02' , leaf : true }    
  6.         ]    
  7.     },{    
  8.         text :'02',    
  9.         children : [    
  10.             { text : '02-01' , leaf : true },  
  11.             { text : '02-02' , leaf : true }  
  12.         ]  
  13. }]  
inde.jsp
[javascript] view plaincopy?
  1. <script type="text/javascript" defer>    
  2.     Ext.onReady(function(){    
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';    
  4.         var tree = new Ext.tree.TreePanel({    
  5.             region: 'center',    
  6.             collapsible: true,    
  7.             title: '樹的拖動',   
  8.             width: 200,    
  9.             border : false,  
  10.             animate : true,   
  11.             rootVisible: false,  
  12.             autoScroll: true,  
  13.             split: true,    
  14.             enableDD : true,//支持拖放    
  15.             loader : new Ext.tree.TreeLoader({    
  16.                 dataUrl : 'list.txt'    
  17.             }),    
  18.             root: new Ext.tree.AsyncTreeNode({    
  19.                 id : '0',      
  20.                 text : '我是根'    
  21.             }),  
  22.             listeners: {      
  23.                 afterrender: function(node) {      
  24.                    //展開樹      
  25.                    tree.expandAll();      
  26.                 }  
  27.             }    
  28.         });    
  29.         new Ext.Viewport({    
  30.             items: [tree]    
  31.         });  
  32.     });    
  33. </script>  
9.1 節(jié)點(diǎn)拖放的三種形式

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

9.2葉子不能append

[javascript] view plaincopy?
  1. tree.on('nodedragover',function(e){  
  2.     //獲取事件的對象  
  3.     var node = e.target;//當(dāng)鼠標(biāo)指針經(jīng)過的節(jié)點(diǎn)  
  4.     if(node.leaf){  
  5.         n.leaf = false;  
  6.     }  
  7.     return true;  
  8. });  

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

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

10.樹的過濾器Ext.tree.TreeFilter

list.txt

[javascript] view plaincopy?
  1. [{    
  2.         text : '01',    
  3.         children : [    
  4.             { text : '01-01' , leaf : true },  
  5.             { text : '01-02' , leaf : true }    
  6.         ]    
  7.     },{    
  8.         text :'02',    
  9.         children : [    
  10.             { text : '02-01' , leaf : true },  
  11.             { text : '02-02' , leaf : true }  
  12.         ]  
  13. }]  
index.jsp
[javascript] view plaincopy?
  1. <script type="text/javascript" defer>      
  2.     Ext.onReady(function(){      
  3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';      
  4.         var tree = new Ext.tree.TreePanel({      
  5.             region: 'center',      
  6.             collapsible: true,      
  7.             title: 'tree過濾器',     
  8.             width: 400,      
  9.             border : false,     
  10.             animate : true,      
  11.             rootVisible: false,     
  12.             autoScroll: true,    
  13.             split: true,      
  14.             loader : new Ext.tree.TreeLoader({    
  15.                dataUrl : 'list.txt'    
  16.             }),    
  17.             root : new Ext.tree.AsyncTreeNode({    
  18.                 //設(shè)置id,讓后臺知道應(yīng)該在何時返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)    
  19.                 id : '0',    
  20.                 text : '我是根'    
  21.             }),    
  22.             listeners: {    
  23.                 afterrender: function(node) {    
  24.                    //展開樹    
  25.                    tree.expandAll();    
  26.                 }    
  27.             },    
  28.             tbar:[{    
  29.                 text:'顯示02',    
  30.                 handler:function(){    
  31.                     treeFiler.filter('02');//通過指定的屬性過濾數(shù)據(jù)    
  32.                 }    
  33.             },'-',{    
  34.                 text:'顯示全部',    
  35.                 handler:function(){    
  36.                     treeFiler.clear();//清理現(xiàn)在的過濾    
  37.                 }    
  38.             },'-',{    
  39.                 xtype : 'textfield',    
  40.                 //為HTML的input輸入字段激活鍵盤事件的代理    
  41.                 enableKeyEvents : true,    
  42.                 listeners  : {    
  43.                     //這個事件只能在enableKeyEvents = true可用    
  44.                     keyup : function(e){    
  45.                         var t = this.getValue()    
  46.                         /****************過濾時應(yīng)該避開葉子節(jié)點(diǎn)**********************/    
  47.                         //傳遞的字符串參數(shù)被正則表達(dá)式讀取    
  48.                         var es = Ext.escapeRe(t);    
  49.                         var re = new RegExp(es,'i');    
  50.                         //通過一個函數(shù)過濾,函數(shù)返回true,那么該節(jié)點(diǎn)將保留    
  51.                         treeFiler.filterBy(function(n){    
  52.                             return !n.isLeaf() || re.test(n.text);    
  53.                         });    
  54.                         /**********不匹配的葉子節(jié)點(diǎn)的父節(jié)點(diǎn)也隱藏**************/    
  55.                         hiddenPkgs =[];    
  56.                         //從該節(jié)點(diǎn)開始逐層下報(Bubbles up)節(jié)點(diǎn),上報過程中對每個節(jié)點(diǎn)執(zhí)行指定的函數(shù)    
  57.                         tree.root.cascade(function(n){    
  58.                             //當(dāng)節(jié)點(diǎn)有子節(jié)點(diǎn)的時候n.ui.ctNode.offsetHeight大于3    
  59.                             if(!n.isLeaf()&&n.ui.ctNode.offsetHeight<3){    
  60.                                 n.ui.hide();    
  61.                                 hiddenPkgs.push(n);    
  62.                             }    
  63.                         });    
  64.                     }       
  65.                 }    
  66.             }]    
  67.         });    
  68.         var treeFiler = new Ext.tree.TreeFilter(tree,{      
  69.             clearBlank : true,//如果查詢的字符串為空字符串,就執(zhí)行clear()      
  70.             //每次過濾之前先執(zhí)行clear()負(fù)責(zé)會在上次過濾結(jié)果的基礎(chǔ)上進(jìn)行查詢      
  71.             autoClear : true      
  72.         });      
  73.                
  74.         new Ext.Viewport({      
  75.             items: [tree]      
  76.         });      
  77.     });      
  78. </script>  
11.利用TreeSorter對樹進(jìn)行排序

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

代碼

[javascript] view plaincopy?
  1. new Ext.tree.TreeSorter(tree,{  
  2.     folderSort : true  
  3. });  

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

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

效果圖

list.txt

  1. [{    
  2.         text : '01',    
  3.         children : [    
  4.             { text : '01-01' , leaf : true , checked : false },  
  5.             { text : '01-02' , leaf : true , checked : false }    
  6.         ]    
  7.     },{    
  8.         text :'02',    
  9.         children : [    
  10.             { text : '02-01' , leaf : true , checked : false },  
  11.             { text : '02-02' , leaf : true , checked : false }  
  12.         ]  
  13. }]  
index.jsp
[javascript] view plaincopy?
  1. <style type="text/css">  
  2. .big {  
  3.     font-weight: bold;  
  4. }  
  5. </style>  
  6. <script type="text/javascript" defer>  
  7.     Ext.onReady(function(){  
  8.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
  9.         var tree = new Ext.tree.TreePanel({  
  10.             region: 'center',             
  11.             collapsible: true,  
  12.             title: '樹形節(jié)點(diǎn)視圖',  
  13.             width: 200,  
  14.             border : false,  
  15.             autoScroll: true,  
  16.             animate : true,  
  17.             rootVisible: false,  
  18.             split: true,  
  19.             loader : new Ext.tree.TreeLoader({  
  20.                 dataUrl : 'list.txt'  
  21.             }),  
  22.             root : new Ext.tree.AsyncTreeNode({  
  23.                 //設(shè)置id,讓后臺知道應(yīng)該在何時返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)  
  24.                 id : '0',  
  25.                 text : '我是根'  
  26.             }),  
  27.             listeners: {  
  28.                 afterrender: function(node) {  
  29.                    //展開樹  
  30.                    tree.expandAll();  
  31.                 }  
  32.             }  
  33.         });  
  34.         new Ext.Viewport({  
  35.             items: [tree]  
  36.         });  
  37.         tree.on('click',function(node){  
  38.             //當(dāng)用戶點(diǎn)擊一個節(jié)點(diǎn),會獲得節(jié)點(diǎn)對應(yīng)的Ext.tree.TreeNodeUI實例  
  39.             var treeNodeUI = node.ui;  
  40.             //最后調(diào)用addClass()方法把文字轉(zhuǎn)化為粗體  
  41.             treeNodeUI.addClass('big');  
  42.             (  
  43.                 function(){  
  44.                     treeNodeUI.removeClass('big');  
  45.                 }  
  46.             ).defer(1000);  
  47.         });  
  48.     });  
  49. </script>  

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

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

list.jsp
[javascript] view plaincopy?
  1. <%@ page language="java"  pageEncoding="UTF-8"%>  
  2. <%     
  3.     request.setCharacterEncoding("UTF-8");  
  4.     response.setCharacterEncoding("UTF-8");  
  5.     //獲取node參數(shù),對應(yīng)的是正在展開的節(jié)點(diǎn)id  
  6.     String node = request.getParameter("node");  
  7.     System.out.println("node="+node);  
  8.     String json =  
  9.     "{km:'深入淺出ExtJs',ks:'12month',js:'',uiProvider:'col',"+  
  10.         "children:["+  
  11.             "{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+  
  12.             "{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+  
  13.          "]}"+  
  14.     ",{km:'深入淺出Java',ks:'10month',js:'',uiProvider:'col',"+  
  15.         "children:["+  
  16.             "{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+  
  17.             "{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+  
  18.          "]}"+  
  19.     "]";  
  20.     response.getWriter().write(json);  
  21. %>  

index.jsp

[javascript] view plaincopy?
  1. <!-- 使用ColumnTree需要帶入這兩個文件 -->  
  2. <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/ColumnNodeUI.css"/>  
  3. <script type="text/javascript" src="<%=rootpath%>/ext/ux/ColumnNodeUI.js"></script>  
  4. <script type="text/javascript" defer>  
  5.     Ext.onReady(function(){  
  6.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
  7.         var tree = new Ext.tree.ColumnTree({  
  8.             //columnTree的寬度要等于columns列總和的寬度,否則會出現(xiàn)錯行  
  9.             width: 451,  
  10.             height: 200,  
  11.             rootVisible:false,  
  12.             autoScroll:false,  
  13.             title: '示例',  
  14.             columns:[{  
  15.                 header:'科目',  
  16.                 width:230,  
  17.                 dataIndex:'km'  
  18.             },{  
  19.                 header:'課時',  
  20.                 width:100,  
  21.                 dataIndex:'ks'  
  22.             },{  
  23.                 header:'講師',  
  24.                 width:100,  
  25.                 dataIndex:'js'  
  26.             }],  
  27.             loader: new Ext.tree.TreeLoader({  
  28.                 dataUrl:'list.jsp',  
  29.                 uiProviders:{  
  30.                     'col': Ext.tree.ColumnNodeUI  
  31.                 }  
  32.             }),  
  33.             root: new Ext.tree.AsyncTreeNode({  
  34.                 //設(shè)置id,讓后臺知道應(yīng)該在何時返回根節(jié)點(diǎn)的子點(diǎn)數(shù)據(jù)  
  35.                 id : '0',  
  36.                 text:'我是根'  
  37.             }),  
  38.             listeners: {  
  39.                 afterrender: function(node) {  
  40.                    //展開樹  
  41.                    tree.expandAll();  
  42.                 }  
  43.             }  
  44.         });  
  45.         new Ext.Viewport({  
  46.             items : [tree]  
  47.         });  
  48.     });  
  49. </script>  

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

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多