Ext树操作事例
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 */functiongetNodeDetail(nodeSelected){var tpl = new Ext.Template( '<pstyle="font-size:12px"><b>部门ID</b>:{deptId}</p>', '<pstyle="font-size:12px"><b>部门名称</b>: {deptName}</p>', '<pstyle="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 */functionloadEditNode(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); }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}});}
页:
[1]