ExtJS5学习之TreePanel

  1. 云栖社区>
  2. 博客列表>
  3. 正文

ExtJS5学习之TreePanel

shy丶gril 2016-05-16 16:04:23 浏览1420 评论0

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

    花了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源码的,请加我QQ:7-3-6-0-3-1-3-0-5,或者加裙

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

【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击

网友评论