Ext樹節點右鍵菜單

1./**
2. * 項目樹
3. */
4.Divo.app.Project = function() {
5. /* ----------------------- private變量 ----------------------- */
6. var treeEl = 'project-tree';
7.
8. var tree, root, treeEditor, root, ctx, ctxNode;
9. var adding, editing;
10. var seed = 0;
11.
12. /* ----------------------- private方法 ----------------------- */
13. // 創建項目樹
14. function createTree() {
15. var xt = Ext.tree;
16. tree = new xt.TreePanel( {
17. el : treeEl,
18. animate : true,
19. enableDD : false,
20. containerScroll : true,
21. lines : false,
22. rootVisible : false,
23. root : new Ext.tree.TreeNode()
24. });
25. root = tree.root;
26.
27. var o;
28. BasisFacade.findAllProjects( {
29. callback : function(retValue) {
30. o = retValue;
31. },
32. async : false
33. });
34. if (o) {
35. for (var i = 0;i < o.length; i++) {
36. var n = new xt.TreeNode( {
37. id : o[i].id,
38. text : o[i].name,
39. leaf : true
40. });
41. root.appendChild(n);
42. }
43. }
44.
45. var selModel = tree.getSelectionModel();
46. selModel.on('selectionchange', onNodeSelected, this, true);
47.
48. tree.on('contextmenu', onContextShow, this);
49. // tree.render();
50. // root.expand();
51. }
52.
53. // 創建TreeEditor
54. function createTreeEditor() {
55. var xt = Ext.tree;
56.
57. treeEditor = new xt.TreeEditor(tree, {
58. allowBlank : false,
59. blankText : '請輸入項目名稱',
60. selectOnFocus : true
61. });
62.
63. treeEditor.on("complete", onNodeEdited, this, true);
64. }
65.
66. // 開始新建項目
67. function onAddNode() {
68. var node = new Ext.tree.TreeNode( {
69. text : '項目' + (++seed),
70. id : 'c1'
71. });
72. adding = true;
73.
74. root.appendChild(node);
75. root.expand();
76. node.select();
77. root.lastChild.ensureVisible();
78. treeEditor.triggerEdit(node);
79. }
80.
81. // 開始修改項目名稱
82. function onUpdateNode() {
83. if (!ctxNode) {
84. Divo.say("請先選擇某個項目");
85. return;
86. }
87. treeEditor.triggerEdit(ctxNode);
88. }
89.
90. // 刪除項目
91. function onDeleteNode() {
92. if (!ctxNode) {
93. Divo.say("請先選擇某個項目");
94. return;
95. }
96. if (ctxNode.isLast()){
97. Divo.say("最後一個項目不能刪除");
98. return;
99. }
100. var id = ctxNode.attributes.id;
101. var o;
102. BasisFacade.deleteProject(id, {
103. callback : function(retValue) {
104. o = retValue;
105. },
106. async : false
107. });
108. if (!o.success) {
109. Divo.alert("刪除失敗(可能已經啓用)");
110. return;
111. }
112. root.removeChild(ctxNode);
113. if (ctxNode.lastChild)
114. ctxNode.lastChild.select();
115.
116. ctxNode = null;
117. }
118.
119. // 項目樹編輯結束處理
120. function onNodeEdited(o, newText, oldText) {
121. var result;
122. var node = o.editNode;
123. if (adding) {
124. BasisFacade.addProject( {
125. name : newText
126. }, {
127. callback : function(retValue) {
128. result = retValue;
129. },
130. async : false
131. });
132. if (!result.success) {
133. Divo.say("[" + newText + "]保存失敗(可能名稱重複)。");
134. root.removeChild(node);
135. } else {
136. node.attributes.id = result.newId;
137. }
138. } else {
139. BasisFacade.updateProject( {
140. id : node.attributes.id,
141. name : newText
142. }, {
143. callback : function(retValue) {
144. result = retValue;
145. },
146. async : false
147. });
148. if (!result.success) {
149. node.setText(oldText); //TODO: 不起作用了!
150. Divo.say("[" + newText + "]保存失敗(可能名稱重複)。");
151. }
152. }
153. editing = false;
154. adding = false;
155. }
156.
157. // 選擇項目
158. function onNodeSelected(sm, node) {
159. if (!node)
160. return;
161. if (!editing && !adding) {
162. var project = {
163. id : node.attributes.id,
164. name : node.attributes.text
165. };
166. Divo.publish(Divo.msg.PROJECT_CHANGE, project);
167. } // 會失去焦點
168. }
169.
170. // 創建上下文菜單
171. function createContextMenu() {
172. if (ctx)
173. return;
174.
175. ctx = new Ext.menu.Menu( {
176. id : 'project-ctx',
177. items : [ {
178. text : '新建',
179. icon : Divo.getIconAdd(),
180. scope : this,
181. handler : onAddNode
182. },{
183. text : '修改',
184. icon : Divo.getIconEdit(),
185. scope : this,
186. handler : onUpdateNode
187. }, '-', {
188. text : '刪除',
189. icon : Divo.getIconDelete(),
190. scope : this,
191. handler : onDeleteNode
192. }]
193. });
194. ctx.on('hide', onContextHide, this);
195. }
196.
197. // 右擊樹節點時
198. function onContextShow(node, e) {
199. createContextMenu();
200.
201. if(ctxNode){
202. ctxNode.ui.removeClass('x-node-ctx');
203. }
204. if (node) {
205. ctxNode = node;
206. ctxNode.ui.addClass('x-node-ctx');
207. }
208.
209. ctx.showAt(e.getXY());
210. }
211.
212. // 隱藏上下文菜單時
213. function onContextHide(){
214. if(ctxNode){
215. ctxNode.ui.removeClass('x-node-ctx');
216. ctxNode = null;
217. }
218. }
219.
220. /* ----------------------- public方法 ----------------------- */
221. return {
222. /**
223. * 初始化
224. */
225. init : function() {
226. createTree();
227. createTreeEditor();
228. },
229. /**
230. * 返回樹對象
231. */
232. getTree : function() {
233. return tree;
234. }
235.
236. }; // return
237.
238.}();