ExtJS5学习之TreePanel(续)

2021-07-07 04:01:17

    承接着上一篇，在TreePanel的节点上应用CellEditor插件对节点进行修改，上一篇《ExtJS5学习之TreePanel》中节点数据修改是通过弹出一个Window实现的，这次我们来试试使用CellEditor插件来完成同样的功能，关键代码如下：

      

Js代码  ExtJS5学习之TreePanel(续)
  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.plugins = [{"ptype": "cellediting"}];  
  54.         this.columns = [  
  55.             {  
  56.                 xtype: 'treecolumn',  
  57.                 dataIndex: 'text',  
  58.                 flex: 1,  
  59.                 editor: {  
  60.                     xtype: 'textfield',  
  61.                     selectOnFocus: true,  
  62.                     validator: function(value){  
  63.                         value = Ext.String.trim(value);  
  64.                         return value.length < 1 ? this.blankText : true;  
  65.                     }  
  66.                 }  
  67.             },  
  68.             {  
  69.                 xtype: 'actioncolumn',  
  70.                 width: 24,  
  71.                 icon: 'delete.png',  
  72.                 iconCls: 'x-hidden',  
  73.                 tooltip: 'Delete'  
  74.             }  
  75.         ];  
  76.         this.callParent(arguments);  
  77.     }  
  78. });  

 关键点1在：

Js代码  ExtJS5学习之TreePanel(续)
  1. this.plugins = [{"ptype": "cellediting"}];  

 这里表示添加celleditor插件，添加了该插件之后，双击树节点可以对节点名称进行修改，默认该插件是双击进入编辑模式，当然你也可以通过修改clickToEdit值来改变这种默认行为，比如

Js代码  ExtJS5学习之TreePanel(续)
  1. this.plugins = [{"ptype": "cellediting","clickToEdit":1}];  

 "clickToEdit":1即表示点击节点一次就可进入编辑模式，默认该值为2.

 

关键点2在：

 

Js代码  ExtJS5学习之TreePanel(续)
  1. this.columns = [  
  2.             {  
  3.                 xtype: 'treecolumn',  
  4.                 dataIndex: 'text',  
  5.                 flex:4,  
  6.                 width: 100,  
  7.                 editor: {  
  8.                     xtype: 'textfield',  
  9.                     selectOnFocus: true,  
  10.                     allowBlank: false,  
  11.                     allowOnlyWhitespace: false  
  12.                 }  
  13.             },  
  14.             {  
  15.                 xtype: 'actioncolumn',  
  16.                 itemId: "deleteCol",  
  17.                 flex:1,  
  18.                 icon: 'delete.png',  
  19.                 tooltip: 'Delete',  
  20.                 iconCls: 'x-hidden'  
  21.             }  
  22.         ];  

 这里定义了两列，一列用于显示节点数据，一列用于显示操作按钮或者说操作图标即xtype:"actioncolumn"。flex:1这里的flex表示定义这两列的宽度比例，如果一个flex:4,一个flex:1即表示这两列的显示宽度比例是4：1，你懂的。icon是显示图标资源文件的路径，tooltip是鼠标放在图标上时弹出的文字提示，iconCls是当前图标应用的CSS类样式，x-hidden是我自定义的css类样式，定义在index.jsp里

 

 

Css代码  ExtJS5学习之TreePanel(续)
  1. <style type="text/css">  
  2.         .x-hidden {  
  3.             visibility: hidden !important  
  4.         }  
  5.     </style>  

 visibility: hidden !important表示隐藏不显示

 

剩下的就是监听事件做相应的逻辑处理，事件监听写在Controller里，代码如下：

 

Js代码  ExtJS5学习之TreePanel(续)
  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.                 //鼠标进入时显示ActionColumn  
  40.                 itemmouseenter: function(view, list, node, rowIndex, e) {  
  41.                     var icons = Ext.DomQuery.select('.x-action-col-icon', node);  
  42.                     if(view.getRecord(node).get('id') != 0) {  
  43.                         Ext.each(icons, function(icon){  
  44.                             Ext.get(icon).removeCls('x-hidden');  
  45.                         });  
  46.                     }  
  47.                 },  
  48.                 //鼠标离开时隐藏ActionColumn  
  49.                 itemmouseleave: function(view, list, node, rowIndex, e) {  
  50.                     var icons = Ext.DomQuery.select('.x-action-col-icon', node);  
  51.                     Ext.each(icons, function(icon){  
  52.                         Ext.get(icon).addCls('x-hidden');  
  53.                     });  
  54.                 },  
  55.                 containerclick: function(_this,e,eOpts) {  
  56.                     if(this.ctxMenu) {  
  57.                         this.ctxMenu.hide();  
  58.                     }  
  59.                 },  
  60.                 //编辑完成后触发  
  61.                 edit: function(editor,e) {  
  62.                     e.record.commit();  
  63.                     console.log(e.record.get("text"));  
  64.                 }  
  65.             },  
  66.             "treecontextmenu > menuitem[itemId=add]": {  
  67.                 click: function(item, event, eOpts) {  
  68.                     if(currentRecord) {  
  69.                         currentRecord.appendChild(  
  70.                             {  
  71.                                 id: id_++,  
  72.                                 "text": "测试节点_" + id_,  
  73.                                 "leaf": true  
  74.                             }  
  75.                         );  
  76.                         //展开当前节点  
  77.                         currentRecord.expand();  
  78.                         //发送ajax请求到后台插入添加的节点数据，你懂的  
  79.                     }  
  80.                 }  
  81.             },  
  82.             "treecontextmenu > menuitem[itemId=edit]": {  
  83.                 click: function(item, event, eOpts) {  
  84.                     if(currentRecord) {  
  85.                         if(!this.editWin) {  
  86.                             this.editWin = Ext.create("OA.view.TreeEditWindow");  
  87.                         }  
  88.                         this.editWin.show();  
  89.                     }  
  90.                 }  
  91.             },  
  92.             "treecontextmenu > menuitem[itemId=delete]": {  
  93.                 click: function(item, event, eOpts) {  
  94.                     if(currentRecord) {  
  95.                         currentRecord.parentNode.removeChild(currentRecord);  
  96.                         currentRecord.commit();  
  97.                     }  
  98.                 }  
  99.             },  
  100.             "treeeditwindow button[itemId=ok]": {  
  101.                 click: function(_this, e, eOpts ) {  
  102.                     if(currentRecord) {  
  103.                         //获取表单数据  
  104.                         var formData = _this.up("treeeditwindow").down("form").getForm().getValues();  
  105.                         var nodeText = formData.nodeName;  
  106.                         //修改节点数据  
  107.                         currentRecord.set("text",nodeText);  
  108.                         currentRecord.commit();  
  109.                         //同理，发送Ajax请求到后台修改节点数据  
  110.                     }  
  111.                     //关闭窗体  
  112.                     _this.up("treeeditwindow").hide();  
  113.                 }  
  114.             },  
  115.             "treeeditwindow button[itemId=cancle]": {  
  116.                 click: function(_this, e, eOpts ) {  
  117.                     _this.up("treeeditwindow").hide();  
  118.                 }  
  119.             },  
  120.             //点击删除小图标时删除当前树节点  
  121.             "actioncolumn[itemId=deleteCol]": {  
  122.                 click: function(gridView, rowIndex, colIndex, column, e, record) {  
  123.                     //获取当前删除小图标所处行的树节点的数据  
  124.                     var model = gridView.getRecord(gridView.findTargetByEvent(e));  
  125.                     console.log(model.parentNode);  
  126.                     model.parentNode.removeChild(model);  
  127.                     model.commit();  
  128.                     //这里是演示下在当前事件里如何获取当前TreePanel对象  
  129.                     console.log(gridView.up("mytreepanel"));  
  130.                     //gridView.up("mytreepanel").deleteNode(model);  
  131.                 }  
  132.             }  
  133.         });  
  134.         this.commonAction = Ext.create('OA.util.CommonDoActionUtil');  
  135.     }  
  136. });  

 在上一篇的基础上多监听了几个事件，比较重要的就是如何编写组件查询表达式，；类似于jQuery的选择器表达式，懂JQuery的话，应该会举一反三。下面对一些重点进行说明：

 

 

Js代码  ExtJS5学习之TreePanel(续)
  1. //编辑完成后触发  
  2.                 edit: function(editor,e) {  
  3.                     e.record.commit();  
  4.                     console.log(e.record.get("text"));  
  5.                 }  

 这里是监听cellEditor插件在退出编辑模式完成编辑时触发的动作，首先通过e.record获取到你修改后新的节点名称数据，e.record是一个Ext.data.Model类的对象，你可以通过e.record.get("属性名")来获取相应属性值，有了修改后的数据，剩下就是把数据通过ajax方式发送到后台更新到数据库，demo里并没有提供跟后台交互的示例代码，留给你们自己去完成。

 

Js代码  ExtJS5学习之TreePanel(续)
  1. //点击删除小图标时删除当前树节点  
  2.             "actioncolumn[itemId=deleteCol]": {  
  3.                 click: function(gridView, rowIndex, colIndex, column, e, record) {  
  4.                     //获取当前删除小图标所处行的树节点的数据  
  5.                     var model = gridView.getRecord(gridView.findTargetByEvent(e));  
  6.                     console.log(model.parentNode);  
  7.                     model.parentNode.removeChild(model);  
  8.                     model.commit();  
  9.                     //这里是演示下在当前事件里如何获取当前TreePanel对象  
  10.                     console.log(gridView.up("mytreepanel"));  
  11.                     //gridView.up("mytreepanel").deleteNode(model);  
  12.                 }  
  13.             }  

 这里是监听删除小图标的单击事件，点击后删除当前树节点，代码逻辑里面有详细注释，就不再啰嗦了。同理，这里也并没有与后台交互的代码，实际可能需要在这里发送Ajax请求到后台去删除该节点数据的，你懂的哈！

 

 

Js代码  ExtJS5学习之TreePanel(续)
  1. //鼠标进入时显示ActionColumn  
  2.                 itemmouseenter: function(view, list, node, rowIndex, e) {  
  3.                     var icons = Ext.DomQuery.select('.x-action-col-icon', node);  
  4.                     if(view.getRecord(node).get('id') != 0) {  
  5.                         Ext.each(icons, function(icon){  
  6.                             Ext.get(icon).removeCls('x-hidden');  
  7.                         });  
  8.                     }  
  9.                 },  
  10.                 //鼠标离开时隐藏ActionColumn  
  11.                 itemmouseleave: function(view, list, node, rowIndex, e) {  
  12.                     var icons = Ext.DomQuery.select('.x-action-col-icon', node);  
  13.                     Ext.each(icons, function(icon){  
  14.                         Ext.get(icon).addCls('x-hidden');  
  15.                     });  
  16.                 },  

 

这两处是实现鼠标悬浮进入时显示删除小图标，鼠标离开时隐藏删除小图标，这个仅仅是玩了一个JS效果，没什么实际用途，可加可不加。

 

最后照例弄几张效果图，不然光代码不够形象，


ExtJS5学习之TreePanel(续)
 
ExtJS5学习之TreePanel(续)
 
ExtJS5学习之TreePanel(续)
 如果你仍有什么疑问或者你需要demo源代码，请加我ＱＱ：7-3-6-0-3-1-3-0-5,或者加裙一起交流学习：

ExtJS5学习之TreePanel(续)
 

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

上一篇：Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象


下一篇：深度学习小技巧（一）：如何保存和恢复TensorFlow训练的模型