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.}();