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