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树例子`是关于如何使用ExtJS库中的`Ext.tree.Panel`组件来展示和操作层次化数据的一个主题。`tree1.txt`和`tree2.txt`文件提供了创建树的数据源,通过解析这些文件,我们可以构建出具有实际数据的交互...
分享这个项目也能帮助其他初学者理解和掌握Ext2.0中的树形控件操作,提升他们使用这个框架的能力。 以上就是关于"ext2.0 树的增删改操作"及其相关知识的详细说明。掌握这些内容,将有助于你在构建Web应用时更熟练地...
其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...
在IT领域,EXT是一个流行的JavaScript库,用于构建富客户端应用程序,尤其在Web应用开发中广泛应用。...通过这种方式,你可以构建一个动态、交互性强的EXT树控件,有效地展示和操作数据库中的层次结构数据。
EXT树的核心类是`Ext.tree.TreePanel`,它提供了丰富的配置项和方法来定制和操作树形结构。控制选择意味着用户可以通过交互(如点击节点)来选择一个或多个树节点,而撤销功能则允许用户撤消他们的最后一步操作,...
在EXT中,树(Tree)和表格(Grid)是两种重要的数据展示组件,它们可以单独使用,也可以结合成树表(TreeGrid)以同时展示层次结构和表格数据。 在EXT树表中,分页(Pagination)是一项关键功能,用于处理大量数据...
【Ext树】是一种基于Ext JS库的图形用户界面组件,用于呈现层次结构的数据。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端应用。在本案例中,“简单的ext树”是一个为初学者设计的基础教程,旨在帮助那些...
1. `tree.htm`:这可能是一个包含下拉树示例的HTML文件,用于展示如何使用Ext JS创建和操作下拉树。 2. `dropTree.htm`:同样,这可能是一个与下拉树相关的HTML页面,可能包含了不同的实现或示例。 3. `MzTreeView...
下拉树(Dropdown Tree)是Ext JS中的一种特殊控件,它结合了下拉列表和树结构的功能,通常用于展示层次化的数据,并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成:一个文本框和一个关联的下拉面板...
在本文中,我们将深入探讨如何使用XML来构建EXT框架中的动态树形菜单。EXT是一个流行的JavaScript库,用于创建丰富的用户界面,而XML则是一种结构化的数据格式,常用于存储和交换数据。结合两者,我们可以创建出功能...
在EXT JS这个强大的JavaScript库中,树形组件(Tree)是一种常见的UI元素,常用于展现层级结构的数据。本文将深入探讨如何处理无限级JSON数据格式并实现动态加载,以优化EXT树的性能。 首先,我们要理解EXT树的基本...
在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...
从给定的文件信息中,我们可以深入探讨“ext树实例代码”这一主题,了解如何在Ext JS中详细应用tree控件。 ### 标题:ext树实例代码 #### 描述:ext中,tree控件的详细应用,实例。 ### 知识点解析: **1. Ext ...
这个类扩展自`Ext.form.field.Select`,因此它具备常规下拉列表的所有特性,同时增加了树形结构的展示和操作。以下是一些关于如何使用Ext下拉列表树的关键知识点: 1. **配置项**:创建下拉列表树时,需要定义一些...
"EXT级联选择的树形控件"是一个实现树形结构并支持级联选择的EXT组件。在实际应用中,它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性: 1. **树形结构**:每个节点...
Ext2.0不仅仅实现了复选框的树形菜单,而且使得在选中某个节点时,如果有子节点,那么就能够将所有的字节点全部选中,当然你也可以直接选择你希望的节点。但是,当你第一次选中某个有子节点但是子节点并没有展开的...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...
这个"EXT 树形结构样例"提供了使用JSON格式返回数据类型的具体示例,帮助开发者理解如何有效地构建和操作EXT Tree。 首先,让我们深入理解EXT Tree的基本概念。EXT Tree是由节点(Nodes)组成的,每个节点可以有子...
总的来说,EXT实现动态树功能涉及到EXT TreePanel的使用、数据存储的配置、节点操作的实现以及用户交互的处理。通过深入理解和实践这些知识点,你可以创建出功能强大的动态树形视图,满足复杂的数据管理和展示需求。
它继承自`Ext.panel.Panel`,并添加了展示和操作树形数据的能力。 2. **创建基本的树形菜单** 创建一个基本的EXT树形菜单,首先需要定义一个配置对象,包含`title`(菜单标题)、`store`(存储树形数据的Store)和...