Ext树操作事例

clq9761

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