深刻淺出ExtJS 第五章 樹形結構

 

 1 5.1 TreePanel的基本使用  2   //樹是一種很是典型的數據結構;
 3 5.1.1 建立一棵樹
 4   //樹控件有Ext.tree.TreePanel類定義,控件的名稱爲TreePanel;TreePanel類繼承字Panel類;
 5   Ext.onReady(function(){
 6     var tree = new Ext.tree.TreePanel({ //建立tree對象;
 7       store:new Ext.data.TreeStore({    //傳入數據;
 8         root:{                          //root根;
 9           text:'樹根',
10           leaf:true
11         }
12       })
13     });
14     tree.render('tree');                //將樹渲染到DOM;
15   });
16 
17 5.1.2 爲樹添加枝和葉
18   root:{
19     text:'我是根',
20     children:[{
21       text:'我是根的第一個枝子',
22       children:[{       //子文件夾;
23         text:'我是第一個枝子的第一個葉子',
24         leaf:true       //葉子文件;
25       },{
26         text:'我是根的第一個葉子'
27         leaf:true
28       }]
29     }]
30   }
31   tree.getRootNode.expand(false,true);
32   //參數一:是否遞歸展開全部子節點;參數二:是否要動畫效果;
33   
34 5.1.3 樹形的配置
35   //將tree指望渲染的目標id放到{}裏;
36   renderTo:'tree'
37 
38 5.1.4 使用TreeStore得到數據
39   //Ext.data.TreeStore能夠利用從後臺獲取的數據爲咱們組裝出一棵樹來;只需提供數據,讓TreeStore完成數據轉換和裝配節點
40   var tree = new Ext.tree.TreePanel({
41     store:new Ext.data.TreeStore({
42       proxy:{
43         type:'ajax',
44         url:'xxx.txt'
45       },
46       root:{text:'我是根'}
47     });
48     renderTo:'tree'
49   });
50   //因爲異步加載會使用樹形TreeStore中的url向後臺發送請求;當展開節點執行對應節點的expand()方法時,它會經過Ajax訪問url指定的地址並獲取數據;並且還會把本身的id做爲參數參數傳遞給url指定的地址;
51   //異步讀取屬性的節點是很是好的方法;只有點擊某一節點後纔會去獲取子節點屬性並進行渲染;
52   
53 5.1.5 使用JSP提供後臺數據
54   //當某個節點展開時,TreeStore會根據設置的url地址去後臺讀取數據;
55   //而當發動請求時,TreeStore會把這個節點的id做爲參數一塊兒發送到後臺去;
56   //對於後臺來講,只要得到node參數,就知道是哪一個節點正在執行展開;
57   //而後後臺根據節點的id返回對應的JSON數據;其中包含id(節點惟一的標識)和text(節點的名稱);
58   
59 5.1.6 經過XML加載樹形
60   <nodes>
61     <node>
62       <text>node 1</text>
63       <leaf>false</leaf>    //是樹結構的文件夾;
64     </node>
65     <node>
66       <text>node 2</text>
67       <leaf>true</leaf>     //是樹結構的文件;
68     </node>
69   </nodes>
70   var store = Ext.create('Ext.data.TreeStore',{
71     proxy:{
72       type:'ajax',
73       url:'xx.xml',
74       extraParams:{
75         isXml:true
76       },
77       reader:{
78         type:'xml',
79         root:'nodes',
80         record:'node'
81       }
82     },
83     sorters:[{
84       property:'leaf',
85       direction:'ASC'
86     },{
87       property:'text',
88       direction:'ASC'
89     }],
90     root:{
91       text:'Ext JS',
92       id:'src',
93       expanded:true
94     }
95   });
96   //由於讀取XML數據時Ext沒法區分上下節點關聯,因此想得到多級層級結構,只能經過異步方式一層一層地加載,負責輸出數據的後臺根據每次發送的node參數判斷目前是在展開哪個節點;

 

 1 5.2 樹的事件  2   //使用on()把一個函數綁定到一個事件上;
 3   tree.on('itemexpand',function(node){
 4     console.info(node,"展開了");
 5   });
 6   tree.on("itmecollapse",function(node){
 7     console.inro(node,"摺疊了");
 8   });
 9   tree.on("itemclick",function(node){
10     console.info("你單擊了",node);
11   })

  

 1 5.3 右鍵菜單  2   >1.先註冊一個名爲contextmenu的事件,觸發事件時,彈出本身定製的菜單;
 3   var contextmenu = new Ext.menu.Menu({
 4     id:'theContextMenu',
 5     items:[{
 6       text:'點我!',
 7       handler:function(){
 8         alert('我被點擊了~');
 9       }
10     }]
11   });
12   >2.綁定contextmenu事件
13   tree.on('itemcontextmenu',function(view,record,item,index,e){
14     e.preventDefault();           //阻止瀏覽器默認右鍵;
15     contextmenu.showAt(e.getXY);  //調用顯示菜單在點擊的地方;
16   })

  

 1 5.4 修改節點的默認圖標  2   //每一個樹形節點都有icon和iconCls屬性;
 3   >.icon
 4   {
 5     text:'icon',
 6     icon:'user_female.png',
 7     leaf:true
 8   }
 9   >.iconCls
10   {
11     text:'iconCls',
12     iconCls:'icon-male',
13     leaf:true
14   }
15   //同時要在HTML中添加對應的CSS定義:
16   .x-tree-cion-leaf .icon-male {
17     background-image:url(user_male.png);
18   }
19   //iconCls只能定義背景圖片,icon設置的是IMG的SRC部分,icon中設置的圖片會把背景圖片部分擋住;

  

 1 5.5 從節點彈出對話框  2   //從事件中得到的node只是一個對象,而不是HTML中一個實際的DOM元素;因此不能直接用animateTarget:node來實現飛出效果;
 3   //Ext的樹節點都遵循MVC設計,因此要找到對應的DOM元素,應該使用節點的View部分;
 4   tree.on("itemclick",function(view,record,item){
 5     Ext.Msg.show({
 6       title:'提示',
 7       msg:'你單擊了'+record.id,
 8       animateTarget:item          //彈窗從點擊點彈出;
 9     })
10   });

 

1 5.6 節點提示信息 2   //鼠標停留在某個節點的上方時,顯示提示信息;
3   //在JSON中添加對應的節點提示內容,qtip:'xxx';
4   //此時代碼須要對提示功能初始化;

  

1 5.7 爲節點設置超連接 2   //在節點樹形中設置超連接的地址;
3   //在JSON數據中添加參數href:"xxx.html",打開位置hrefTarget:'_blank';

  

 1 5.8 樹形的拖放  2   //在建立TreePanel時,設置啓用插件treeviewdragdrop;從而實現葉子與樹杈和根之間的拖放;
 3   var tree = new Ext.tree.TreePanel({
 4     viewConfig:{
 5       plugins:{ptype:'treeviewdragdrop'}  //啓用拖拽插件;
 6     },
 7     store:new Ext.data.TreeStore({
 8       proxy:{
 9         type:'ajax',
10         url:'xxx.txt'
11       },
12       root:{text:'我是根'}
13     })
14     tree.renderTo('tree');
15   });
16 
17 5.8.1 節點拖放的三種形式
18   >1.append:放下去的節點會變成目標節點的子節點;
19   >2.above:放下去的節點和目標節點是兄弟關係,放下去的節點排行在前;
20   >3.below:放下去的節點與目標節點是兄弟關係,放下去的節點排行在後;
21 
22 5.8.2 葉子拖拽問題
23   //Ext規定:若是節點包含leaf:true;就不能用拖放的方式添加子節點;
24   tree.view.on("beforedrop",function(node,data,overModel,dropPosition,dropHandler){
25     if(overModel.get('leaf')){      //判斷鼠標指針通過的節點是否包含leaf:true;
26       overModel.set('leaf',false);  //更改leaf屬性;
27       overModel.set('loaded',true); //設置能夠拖拽;
28     }
29     return true;
30   });
31 
32 5.8.3 判斷拖放的目標+Ajax提交
33   //drop事件是拖放的節點放下去時觸發的;
34   tree.view.on("drop",function(node,data,overModel,dropPosition,dropHandler){
35     //node:正在拖放的節點;
36     //overModel:是放下去碰到的節點;
37     //dropPosition:是放下去的方式;
38     //經過這些數據,咱們能夠知道當前節點的位置和狀態,從而計算出數據並經過Ajax發送給後臺;讓後臺對節點的數據進行更行;
39     Ext.Msg.alert("提示","我們的節點"+node.id+"掉到了"+overModel.get('id')+"上,掉落方式是"+dropPosition);
40     var item = {
41       dropNode:node.id,
42       target:overModel.get('id'),
43       point:dropPosition
44     };
45     Ext.Ajax.request({
46       method:'POST',
47       url:'xxx.jsp',
48       success:function(response){ 
49       //response:相應對象;其中包含響應狀態和響應內容;
50         Ext.Msg.alert('信息',response.responseText);  
51         //responseText:以文本形式返回信息;
52       },
53       failure:function(){
54         Ext.Msg.alert("錯誤","與後臺聯繫時出現問題");
55       },
56       params:{
57         //發送給後臺的參數;"name1=value1&name2=value2";
58         data:encodeURIComponent(Ext.encode(item))
59         //對參數進行編碼,避免出現非法字符;
60       }
61     });
62   });
63 
64 5.8.4 樹之間的拖放
65   //對兩棵樹都設置ptype:'treeviewdragdrop';

 

1 5.9 對樹進行排序 2   //設置folderSort:true參數,能夠實現爲樹形進行排序;
3   var tree = new Ext.tree.TreePanel({
4     store:new Ext.data.TreeStore({
5       folderSort:true,      //爲屬性自動排序;
6       proxy:{..}
7       root:{...}
8     })
9   });

 

 1 5.10 帶Checkbox的樹形  2   //在節點數據設置參數:checked:true;
 3   var tree = new Ext.tree.TreePanel({
 4     store:new Ext.data.TreeStore({
 5       root:{
 6         text:'我是根',
 7         children:[{text:'Leaf No.1',leaf:true,checked:true}]
 8         //爲葉子前添加複選框;
 9       }
10     })
11   });

  

 1 5.11 表格與樹形的結合  2   //在表格中實現分級顯示的功能;二者都支持對不一樣分類數據執行展開和摺疊的操做;
 3   //經過擴展使用treecolumn插件的方式實現表格與樹形結合的效果;
 4   Ext.onReady(function(){
 5     Ext.define('Task',{       //定義Task類;
 6       extend:'Ext.data.Model',//繼承Model類;
 7       fields:[
 8         {name:'task',type:'string'},
 9         {name:'user',tyhpe:'string'},
10         {name:'duration',type:'string'}
11       ]
12     });
13 
14     var tree = new Ext.tree.TreePanel({
15       rootVisible:false,    //隱藏根節點;
16       title:'示例',
17       renderTo:'tree',
18       collapsible:true,     //具備可摺疊功能;
19       useArrows:true,       //在tree中使用Vista-style樣式的箭頭;
20 
21       columns:[{            //每一行應該分爲激烈進行顯示;
22         xtype:'treecolumn', 
23         header:'任務',
24         width:330,
25         dataIndex:'task'    //設置任務列;
26       },{
27         xtype:'treecolumn',
28         header:'持續時間',
29         width:100,
30         dataIndex:'duration'
31       },{
32         xtype:'treecolumn',
33         header:'負責人',
34         width:100,
35         dataIndex:'user'
36       }],
37 
38       store:new Ext.data.TreeStore({
39         model:Task,
40         proxy:{
41           type:'ajax',      //設置Ajax方式傳送;
42           url:'xxx.txt'
43         },
44         root:{
45           text:'我是根'
46         }
47       })
48     });
49   });
50   //後臺JSON數據
51   [{
52     task:'Ext程序開發',     //第一列內容;
53     duration:'12month',     //第二列內容;
54     user:'',                //第三列內容;
55     cls:'master-task',      //class;
56     iconCls:'task-folder',  //icon圖標;
57     children:[{             //子分支;
58       task:'第一章內容',    //分支第一行內容
59       duration:'1month',    //分支第二行內容
60       user:'Lingo',         //分支第三行內容
61       leaf:true,            //葉子分支
62       iconCls:'tase'        //icon圖標
63     },{...}]
64   }]

 

 1 5.12 更多樹形的高級應用  2 5.12.1 如何選中樹的某個節點
 3   >1.TreePanel.selectPath():傳入的參數是想要選中的節點path值;
 4   //根id='root'下有id='leaf'的節點,則selectPath('root/leaf');
 5   >2.TreePanel.getSelectionModel():得到屬性的選擇模型;
 6   //SM有一個select()函數,傳入index或者節點對應的record就能夠選中這個節點;
 7 
 8 5.12.2 刷新樹的全部節點
 9   //根節點有一個reload()函數,使用它會刷其下的全部節點;若要刷新整棵樹,就要取得根節點rootNode,而後調用reload()函數;
10 
11 5.12.3 借用grid的緩衝視圖插件
12   //在成千上萬個樹形節點須要渲染時,保證只渲染當前渲染的視圖部分,自動監聽滾動條的拖拽狀況;按需加載,保證在顯示海量數據時不發生卡頓問題;
13   plugins:[{ptype:'bufferedrenderer'}], //引入插件;
14 
15 5.12.4 借用grid的鎖定插件
16   //將某一列鎖定,即便出現橫向滾動條,也能夠保證鎖定的列一直顯示在視圖中;
17   //直接對某一列設置locked:true;就能夠鎖定它;
18   {
19     xtype:'treeecolumn',
20     text:'任務',
21     wdith:300,
22     dataIndex:'task',
23     locked:true
24   }