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

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

目录
相关文章
|
2月前
|
JavaScript
Twaver-HTML5基础学习(31)Tree基本使用
本文介绍了如何在Twaver-HTML5中使用Tree组件,包括设置勾选模式、引导线、自定义图标、监听事件和控制复选框显示等。
38 2
Twaver-HTML5基础学习(31)Tree基本使用
|
JavaScript 前端开发
ext的treePanel触发tabPanel
最终的效果如下图所描述上述效果的实现过程如下所示直接上代码如上图所示,我们点击treePanel触发tabPanel的变化,因此肯定是treePanel中添加了事件响应的代码没错,就是这个它的具体代码如下 //鼠标点击treePanel的item,然后触发tabPanel新增tab,所以必须首先获取tabPanel的对象 var tab = Ext.
1241 0
|
XML JavaScript 前端开发
|
JSON JavaScript 数据格式
|
JavaScript 前端开发
|
JavaScript 前端开发
|
JavaScript 容器 数据安全/隐私保护