Ext树结构通过右键菜单进行操作的一个事例,供以后应用参考。
/** * @description 组织架构主页面 * @date 2010-6-10 * @version 1.0 * */ //定义命名空间 Ext.ns("Rosy.department"); /** * 组织架构树状面板 * @class Rosy.department.DepartmentTreePanel * @extends Ext.tree.TreePanel */ Rosy.department.DepartmentTreePanel = Ext.extend(Ext.tree.TreePanel,{ // 构造方法 constructor:function(){ // 构造组件 Rosy.department.DepartmentTreePanel.superclass.constructor.apply(this,[{ //renderTo: Ext.getBody(), useArrows: true, autoScroll: true, animate: true, enableDD: true, containerScroll: true, border: false, id:'departmentTreePanel', region: 'center', margins: '2 2 0 2', width: 300, loader: new Ext.tree.TreeLoader({ dataUrl : '/mrp/treeDept.action', listeners:{ "beforeload":function(treeLoader,node) { treeLoader.baseParams.departmentId= (node.id!="01"?node.id:"01"); } } }), root: new Ext.tree.AsyncTreeNode({ text: '组织架构', draggable:false, id:'01' }) , listeners:{ 'click':function(node,event){ // 加载节点信息 getNodeDetail(node); }, 'dblclick' : function(node, event) { if (node.isLeaf()) { // 为叶子节点时,点击不进入链接 createTreeEditor().triggerEdit(node); } }, //右键 "contextmenu":function(node, e){ var menu = createMenu(node); //alert(e.getPoint()); menu.showAt(e.getPoint()); }, //节点文本改变时 "textchange":function(node, newText, oldText) { if(newText!=oldText){ editTreeItem(node,newText); } }, // 当节点移动时触发事件 "movenode": function(tree, node,oldParent, newParent, index) { moveTreeNode(node, oldParent, newParent, index); } } }]) } }) /** * 树节点编辑 * @return {} */ function createTreeEditor(){ var treePanel = Ext.getCmp('departmentTreePanel'); var treeEditor = new Ext.tree.TreeEditor(treePanel, { allowBlank : false, ignoreNoChange : true, selectOnFocus : true }); return treeEditor; } /** * 创建菜单 */ function createMenu(nodeSelected){ var leafMenu = new Ext.menu.Menu({ items : [{ text : "添加", handler : function() { var addDeptWindow = new Rosy.department.DepartmentAddWindow(nodeSelected); addDeptWindow.show(); } },"-",{ text : "修改", handler : function() { //createTreeEditor().triggerEdit(nodeSelected); var editDeptWindow = new Rosy.department.DepartmentEditWindow(nodeSelected); loadEditNode(nodeSelected); editDeptWindow.show(); } },"-", { text : "删除", handler : function(){ deleteTreeItem(nodeSelected); } }] }); return leafMenu; } /** * 获取部门信息 * @param {} nodeSelected */ function getNodeDetail(nodeSelected){ var tpl = new Ext.Template( '<p style="font-size:12px"><b>部门ID</b>: {deptId}</p>', '<p style="font-size:12px"><b>部门名称</b>: {deptName}</p>', '<p style="font-size:12px"><b>部门描述</b>: {deptDesc}</p>' ); tpl.compile(); var store = new Ext.data.Store({ url: '/mrp/loadDept.action?deptId='+nodeSelected.id, reader:new Ext.data.JsonReader( {root:"pubDept",id:'deptId'}, Ext.data.Record.create([ {name:"deptId" ,mapping: 'deptId'}, {name:"deptName" ,mapping: 'deptName'}, {name:"deptDesc" ,mapping: 'deptDesc'} ]) ) }); // store加载后触发 store.load({ callback:function(records,options,success){ if(success == true){ var el = Ext.getCmp('departmentDetailsPanel').body; tpl.overwrite(el, store.getAt(0).data); }else{ Ext.Msg.alert('提示','数据获取出错'); } } }); } /** * 加载部门信息 * @param {} nodeSelected */ function loadEditNode(nodeSelected){ var store = new Ext.data.Store({ url: '/mrp/loadDept.action?deptId='+nodeSelected.id, reader:new Ext.data.JsonReader( {root:"pubDept",id:'deptId'}, Ext.data.Record.create([ {name:"pubDept.deptId" ,mapping: 'deptId'}, {name:"pubDept.deptNameZh" ,mapping: 'deptName'}, {name:"pubDept.deptDescZh" ,mapping: 'deptDesc'} ]) ) }); // store加载后触发 store.load({ callback:function(records,options,success){ if(success == true){ Ext.getCmp('departmentEditPanel').getForm() .loadRecord(records[0]); }else{ Ext.Msg.alert('提示','数据获取出错'); } } }); } /** * 删除树结点 * @param {} nodeSelected */ function deleteTreeItem(nodeSelected){ var treePanel = Ext.getCmp('departmentTreePanel'); Ext.Msg.confirm("确认删除", "确定要删除所选节点吗?", function(btn) { if (btn == "yes") { if (nodeSelected != treePanel.getRootNode()) { Ext.Ajax.request({ url: '/mrp/delDept.action', success: function(){ Ext.MessageBox.alert('提示', '删除部门成功.',function(){ var parentNode = nodeSelected.parentNode; nodeSelected.remove(); if(!parentNode.hasChildNodes()){ parentNode.parentNode.reload(); } }); }, failure: function(){ Ext.MessageBox.alert('提示', '删除部门出错.'); }, params: { deptId: nodeSelected.id} }); } else { Ext.Msg.alert("警告", "不能删除树的根节点!"); } } }); } /** * 修改树结点 * @param {} nodeSelected */ function editTreeItem(nodeSelected,nodeText){ Ext.Ajax.request({ url: '/mrp/editDept.action', success: function(){ }, failure: function(){ Ext.MessageBox.alert('提示', '修改部门出错.'); }, params: { 'pubDept.deptNameZh': nodeText, 'pubDept.deptId': nodeSelected.id} }); } /** * 移动树结点 * @param {} node * @param {} oldParent * @param {} newParent * @param {} index */ function moveTreeNode(node, oldParent, newParent, index){ Ext.Ajax.request({ url: '/mrp/moveDept.action', success: function(){ }, failure: function(){ Ext.MessageBox.alert('提示', '移动部门节点出错.'); }, params: { 'deptId': node.id, 'oldParentId': oldParent.id, 'newParentId': newParent.id, 'nodeIndex': index} }); }