ExtJS5学习之TreePanel

    花了3-4个小时整了一个有关ExtJS5的TreePanel组件的节点增删改查操作以及拖拽排序的demo,demo里仅仅是前端操作，不涉及后台代码。因为TreePanel是ExtJS里使用难度稍微大点的一个组件之一，特此写这篇文章记录一下，也希望能给那些对ExtJS同样感兴趣的童鞋们一些帮助。

Js代码  

1. /*****************ExtJS TreePanel面板*********************/  
2. Ext.define("OA.view.TreePanel",{  
3.     extend:'Ext.tree.Panel',  
4.     alias : 'widget.mytreepanel',  
5.     alternateClassName: ["OA.TreePanel"],  
6.     initComponent : function(){  
7.         Ext.apply(this,{  
8.             title:"导航菜单",  
9.             animate:true,  
10.             animCollapse: true,  
11.             autoScroll : true,  
12.             scroll: "vertical",  
13.             rootVisible : false,  
14.             lines: false,  
15.             useArrows: true,  
16.             containerScroll: true,  
17.             collapsed: false,  
18.             collapsible: false,  
19.             layout: "fit",  
20.             border: false,  
21.             width: 200,  
22.             dockedItems: {  
23.                 dock : 'top',  
24.                 xtype : 'toolbar',  
25.                 items : [  
26.                     {  
27.                         xtype : 'button',  
28.                         text : '刷新'  
29.                     },  
30.                     {  
31.                         xtype : 'button',  
32.                         text : '展开'  
33.                     },  
34.                     {  
35.                         xtype : 'button',  
36.                         text : '收缩'  
37.                     }  
38.                 ]  
39.             },  
40.             viewConfig : {  
41.                 loadingText : "正在加载...",  
42.                 plugins: {  
43.                     ptype: 'treeviewdragdrop'  
44.                 },  
45.                 listeners: {  
46.                     drop: function(node, data, dropRec, dropPosition) {  
47.                         //store.sync();  
48.                     }  
49.                 }  
50.             },  
51.             store: Ext.create("OA.store.TreeStore")  
52.         });  
53.         this.callParent(arguments);  
54.     }  
55. });  

 plugins: {

                    ptype: 'treeviewdragdrop'

                },
这里是给TreePanel添加拖拽插件的，从而支持通过鼠标拖拽节点实现节点排序，添加此插件仅仅是实现了前端界面上的排序效果，要达到真正的排序还是需要借助后台代码来实现的。比如拖拽后在drop事件里，去请求后台处理，具体逻辑就是把被拖拽节点从其原始父节点里删除，将其父节点设置为当前投放的节点。

Js代码  

1. /*****************ExtJS Tree数据源类*********************/  
2. Ext.define("OA.store.TreeStore", {  
3.     extend : "Ext.data.TreeStore",    
4.     requires: ['OA.util.AppUtil'],  
5.     model: 'OA.model.TreeModel',  
6.     singleton: false,  
7.     root: {  
8.         id: 0,  
9.         expanded: true,  
10.         children: [  
11.             {  
12.                 id: 1,  
13.                 text: "系统管理",  
14.                 leaf: true  
15.             },  
16.             {  
17.                 id: 2,  
18.                 text: "订单管理",  
19.                 leaf: true  
20.             },  
21.             {  
22.                 id: 3,  
23.                 text: "流程管理",  
24.                 leaf: true  
25.             }  
26.         ]  
27.     },  
28.     clearOnLoad : true,   
29.     nodeParam: "id"  
30. });   

 TreePanel的数据源类里直接定义了数据，没有从后台加载数据，为了演示方便，不想弄的太麻烦。如果想弄成从后台动态加载数据，可以配置api，比如：

Js代码  

1. proxy: {    
2.             type: 'ajax',    
3.             api: {    
4.                 create: 'xxxxxxxxxxxxxxx/tree/add',    
5.                 read: 'xxxxxxxxxxxxxxxxx/tree/list',    
6.                 update: 'xxxxxxxxxxxxxxx/tree/edit',    
7.                 destroy: 'xxxxxxxxxxxxxx/tree/delete'    
8.             },    
9.             writer: {    
10.                 type: 'json',    
11.                 allowSingle: false,    
12.                 encode: true,    
13.                 root: 'records'    
14.             }    
15.         },    

 create即添加请求，read即查询请求，update即修改请求，destory即删除请求。

分别对应各自的后台请求URL，你懂的。

Js代码  

1. /*****************ExtJS Tree数据模型类*********************/  
2. Ext.define("OA.model.TreeModel", {  
3.     extend : "Ext.data.Model",    
4.     fields : [  
5.         {name : "id",type : "int"},  
6.         {name : "text",type : "string"},  
7.         {name : "leaf",type : "boolean"},    
8.         {name : "expanded",type : "boolean"}  
9.     ]  
10. });   

 TreePanel需要的数据模型，text即节点名称，leaf即是否为叶子节点，expanded即默认是否展开，如果你希望在节点前面加一个小图标，那么你还可以在数据模型再加一个属性iconCls,给它赋值一个css样式即可。

Js代码  

1. /********************TreePanel右键菜单***************************/  
2. Ext.define("OA.view.TreeContextMenu",{  
3.     extend: 'Ext.menu.Menu',  
4.     alias : 'widget.treecontextmenu',  
5.     alternateClassName: ["OA.TreeContextMenu"],  
6.     initComponent: function(){  
7.         Ext.apply(this,{  
8.             floating :true,  
9.             plain : true,  
10.             floating:true,  
11.             items :[  
12.                 {  
13.                     itemId: 'add',  
14.                     text : '添加'  
15.                 },  
16.                 {  
17.                     itemId: 'edit',  
18.                     text : '编辑'  
19.                 },  
20.                 {  
21.                     itemId: 'delete',  
22.                     text : '删除'  
23.                 }  
24.             ]  
25.         });  
26.         this.callParent(arguments);  
27.     }  
28. });  

 这是一个右键菜单，没什么好说的

Js代码  

1. /********************TreePanel节点数据编辑窗体*********************/  
2. Ext.define("OA.view.TreeEditWindow",{  
3.     extend: 'Ext.window.Window',  
4.     alias : 'widget.treeeditwindow',  
5.     alternateClassName: ["OA.TreeEditWindow"],  
6.     initComponent: function(){  
7.         Ext.apply(this,{  
8.             title: "编辑节点",  
9.             width: 230,  
10.             height: 100,  
11.             layout: "fit",  
12.             closeAction: "hide",  
13.             items :[  
14.                 {  
15.                     xtype: "form",  
16.                     defaultType: 'textfield',  
17.                     defaults: {  
18.                         anchor: '100%'  
19.                     },  
20.                     fieldDefaults: {  
21.                         labelWidth: 60,  
22.                         labelAlign: "left",  
23.                         flex: 1,  
24.                         margin: 5  
25.                     },  
26.                     items: [  
27.                         {  
28.                             xtype: "textfield",  
29.                             name: "nodeName",  
30.                             fieldLabel: "节点名称",  
31.                             allowBlank: false  
32.                         }  
33.                     ]  
34.                 }  
35.             ],  
36.             buttons: [  
37.                 { xtype: "button", itemId: "ok",text: "确定"},  
38.                 { xtype: "button", itemId: "cancle", text: "取消"}  
39.             ]  
40.         });  
41.         this.callParent(arguments);  
42.     }  
43. });  

 这是一个普普通通的Window，点击菜单里的编辑，即创建窗体对象并show出来。

其实主要的事件处理逻辑都写在Controller里，代码如下：

Js代码  

1. /*******************全局应用程序控制器类******************/  
2.   
3. //首先载入工具类  
4. Ext.require(  
5.     [  
6.         'OA.util.CommonDoActionUtil'  
7.     ]  
8. );  
9.   
10. Ext.define('OA.controller.AppController', {  
11.     extend: 'Ext.app.Controller',  
12.     requires: ['OA.util.CommonDoActionUtil'],  
13.     //数据模型注册  
14.     models: [  
15.         'TreeModel'  
16.     ],  
17.     //视图注册  
18.     views: ["TreePanel","TreeContextMenu","TreeEditWindow"],  
19.     //数据源注册  
20.     stores: [  
21.         'TreeStore'  
22.     ],  
23.     init: function() {  
24.         var id_ = 111;  
25.         var currentRecord = null;  
26.         this.control({  
27.             "mytreepanel": {  
28.                 itemcontextmenu: function(_this, record, item, index, evt, eOpts) {  
29.                     if(!this.ctxMenu) {  
30.                         this.ctxMenu = Ext.create("OA.view.TreeContextMenu");  
31.                     }  
32.                     this.ctxMenu.showAt(evt.getXY());  
33.                     //缓存当前鼠标右键选中的节点数据Name  
34.                     currentRecord = record;  
35.                     evt.preventDefault();  
36.                     //evt.stopEvent();  
37.                     _this.getSelectionModel().select(index);  
38.                 },  
39.                 containerclick: function(_this,e,eOpts) {  
40.                     if(this.ctxMenu) {  
41.                         this.ctxMenu.hide();  
42.                     }  
43.                 }  
44.             },  
45.             "treecontextmenu > menuitem[itemId=add]": {  
46.                 click: function(item, event, eOpts) {  
47.                     if(currentRecord) {  
48.                         currentRecord.appendChild(  
49.                             {  
50.                                 id: id_++,  
51.                                 "text": "测试节点_" + id_,  
52.                                 "leaf": true  
53.                             }  
54.                         );  
55.                         //展开当前节点  
56.                         currentRecord.expand();  
57.                         //发送ajax请求到后台插入添加的节点数据，你懂的  
58.                     }  
59.                 }  
60.             },  
61.             "treecontextmenu > menuitem[itemId=edit]": {  
62.                 click: function(item, event, eOpts) {  
63.                     if(currentRecord) {  
64.                         if(!this.editWin) {  
65.                             this.editWin = Ext.create("OA.view.TreeEditWindow");  
66.                         }  
67.                         this.editWin.show();  
68.                     }  
69.                 }  
70.             },  
71.             "treecontextmenu > menuitem[itemId=delete]": {  
72.                 click: function(item, event, eOpts) {  
73.                     if(currentRecord) {  
74.                         currentRecord.parentNode.removeChild(currentRecord);  
75.                         currentRecord.commit();  
76.                     }  
77.                 }  
78.             },  
79.             "treeeditwindow button[itemId=ok]": {  
80.                 click: function(_this, e, eOpts ) {  
81.                     if(currentRecord) {  
82.                         //获取表单数据  
83.                         var formData = _this.up("treeeditwindow").down("form").getForm().getValues();  
84.                         var nodeText = formData.nodeName;  
85.                         //修改节点数据  
86.                         currentRecord.set("text",nodeText);  
87.                         currentRecord.commit();  
88.                         //同理，发送Ajax请求到后台修改节点数据  
89.                     }  
90.                     //关闭窗体  
91.                     _this.up("treeeditwindow").hide();  
92.                 }  
93.             },  
94.             "treeeditwindow button[itemId=cancle]": {  
95.                 click: function(_this, e, eOpts ) {  
96.                     _this.up("treeeditwindow").hide();  
97.                 }  
98.             }  
99.         });  
100.         this.commonAction = Ext.create('OA.util.CommonDoActionUtil');  
101.     }  
102. });  

 最后效果图如下：

 

 各位看官如果还有什么疑问或者需要demo源码的，请加我ＱＱ：7-3-6-0-3-1-3-0-5，或者加裙

转载：http://iamyida.iteye.com/blog/2192311