ExtJS5学习之TreePanel(续)

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

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.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代码  

1. this.plugins = [{"ptype": "cellediting"}];  

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

Js代码  

1. this.plugins = [{"ptype": "cellediting","clickToEdit":1}];  

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

关键点2在：

Js代码  

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代码  

1. <style type="text/css">  
2.         .x-hidden {  
3.             visibility: hidden !important  
4.         }  
5.     </style>  

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

剩下的就是监听事件做相应的逻辑处理，事件监听写在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.                 //鼠标进入时显示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代码  

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代码  

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代码  

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效果，没什么实际用途，可加可不加。

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

 

 

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

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