`
clq9761
  • 浏览: 592817 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

Ext树操作事例

    博客分类:
  • 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}
	});	
}


 

分享到:
评论

相关推荐

    Ext树例子

    总结来说,`Ext树例子`是关于如何使用ExtJS库中的`Ext.tree.Panel`组件来展示和操作层次化数据的一个主题。`tree1.txt`和`tree2.txt`文件提供了创建树的数据源,通过解析这些文件,我们可以构建出具有实际数据的交互...

    ext2.0 树的增删改操作

    分享这个项目也能帮助其他初学者理解和掌握Ext2.0中的树形控件操作,提升他们使用这个框架的能力。 以上就是关于"ext2.0 树的增删改操作"及其相关知识的详细说明。掌握这些内容,将有助于你在构建Web应用时更熟练地...

    Ext树创建说明.rar

    其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...

    ext 树控件+数据库

    在IT领域,EXT是一个流行的JavaScript库,用于构建富客户端应用程序,尤其在Web应用开发中广泛应用。...通过这种方式,你可以构建一个动态、交互性强的EXT树控件,有效地展示和操作数据库中的层次结构数据。

    ext树的控制选择和撤销,可以直接使用

    EXT树的核心类是`Ext.tree.TreePanel`,它提供了丰富的配置项和方法来定制和操作树形结构。控制选择意味着用户可以通过交互(如点击节点)来选择一个或多个树节点,而撤销功能则允许用户撤消他们的最后一步操作,...

    EXT树表分页(SERVLET)

    在EXT中,树(Tree)和表格(Grid)是两种重要的数据展示组件,它们可以单独使用,也可以结合成树表(TreeGrid)以同时展示层次结构和表格数据。 在EXT树表中,分页(Pagination)是一项关键功能,用于处理大量数据...

    简单的ext树

    【Ext树】是一种基于Ext JS库的图形用户界面组件,用于呈现层次结构的数据。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端应用。在本案例中,“简单的ext树”是一个为初学者设计的基础教程,旨在帮助那些...

    ext 下拉树 ext2

    1. `tree.htm`:这可能是一个包含下拉树示例的HTML文件,用于展示如何使用Ext JS创建和操作下拉树。 2. `dropTree.htm`:同样,这可能是一个与下拉树相关的HTML页面,可能包含了不同的实现或示例。 3. `MzTreeView...

    ext js 下拉树

    下拉树(Dropdown Tree)是Ext JS中的一种特殊控件,它结合了下拉列表和树结构的功能,通常用于展示层次化的数据,并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成:一个文本框和一个关联的下拉面板...

    解析Xml构建Ext树形菜单

    在本文中,我们将深入探讨如何使用XML来构建EXT框架中的动态树形菜单。EXT是一个流行的JavaScript库,用于创建丰富的用户界面,而XML则是一种结构化的数据格式,常用于存储和交换数据。结合两者,我们可以创建出功能...

    ext树 无限级 json 数据格式 动态加载

    在EXT JS这个强大的JavaScript库中,树形组件(Tree)是一种常见的UI元素,常用于展现层级结构的数据。本文将深入探讨如何处理无限级JSON数据格式并实现动态加载,以优化EXT树的性能。 首先,我们要理解EXT树的基本...

    Ext树形菜单(我自己做的)

    在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...

    ext树实例代码

    从给定的文件信息中,我们可以深入探讨“ext树实例代码”这一主题,了解如何在Ext JS中详细应用tree控件。 ### 标题:ext树实例代码 #### 描述:ext中,tree控件的详细应用,实例。 ### 知识点解析: **1. Ext ...

    Ext下拉列表树

    这个类扩展自`Ext.form.field.Select`,因此它具备常规下拉列表的所有特性,同时增加了树形结构的展示和操作。以下是一些关于如何使用Ext下拉列表树的关键知识点: 1. **配置项**:创建下拉列表树时,需要定义一些...

    ext 级联选择的树形控件

    "EXT级联选择的树形控件"是一个实现树形结构并支持级联选择的EXT组件。在实际应用中,它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性: 1. **树形结构**:每个节点...

    Ext 2.0 树形机构

    Ext2.0不仅仅实现了复选框的树形菜单,而且使得在选中某个节点时,如果有子节点,那么就能够将所有的字节点全部选中,当然你也可以直接选择你希望的节点。但是,当你第一次选中某个有子节点但是子节点并没有展开的...

    Ext TreePanel Checked Ext复选框树

    在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...

    EXT 树形结构样例

    这个"EXT 树形结构样例"提供了使用JSON格式返回数据类型的具体示例,帮助开发者理解如何有效地构建和操作EXT Tree。 首先,让我们深入理解EXT Tree的基本概念。EXT Tree是由节点(Nodes)组成的,每个节点可以有子...

    EXT实现动态树的功能

    总的来说,EXT实现动态树功能涉及到EXT TreePanel的使用、数据存储的配置、节点操作的实现以及用户交互的处理。通过深入理解和实践这些知识点,你可以创建出功能强大的动态树形视图,满足复杂的数据管理和展示需求。

    如何使用ext写的树形菜单

    它继承自`Ext.panel.Panel`,并添加了展示和操作树形数据的能力。 2. **创建基本的树形菜单** 创建一个基本的EXT树形菜单,首先需要定义一个配置对象,包含`title`(菜单标题)、`store`(存储树形数据的Store)和...

Global site tag (gtag.js) - Google Analytics