在JOffice的产品中,有很多功能的管理是基于树的,在树中需要能进行其节点的管理,如下所示:
因而为了实现该功能的方便性,抽取一个类来实现,代码如下所示:
Ext.ns("htsoft.ux");
/**
* @company 宏天软件有限公司
* @createtime 2010-01-02
* @author csx
* @class TreePanelEditor
* @extends Ext.tree.TreePanel
* @description 树菜单编辑器,可带右键操作菜单,使用方式示例见ArchiveTypeTempView.js
*/
htsoft.ux.TreePanelEditor=Ext.extend(Ext.tree.TreePanel,{
showContextMenu:true,
url:null,
/**
* 右键菜单
* @type
*/
contextMenu:null,
/**
* 右键菜单项
* @type
*/
contextMenuItems:null,
/**
* 选择树节点
* @type
*/
selectedNode:null,
/**
* 构造函数
*/
constructor:function(_cfg){
if(_cfg==null){
_cfg={};
}
Ext.apply(this,_cfg);
//从父类中拷贝构造
htsoft.ux.TreePanelEditor.superclass.constructor.call(this,{
tbar:new Ext.Toolbar({items:[
{
xtype : 'button',
iconCls : 'btn-refresh',
text : '刷新',
handler : function() {
Ext.getCmp(_cfg.id).root.reload();
}
},{
xtype : 'button',
text : '展开',
iconCls : 'btn-expand',
handler : function() {
Ext.getCmp(_cfg.id).expandAll();
}
}, {
xtype : 'button',
text : '收起',
iconCls : 'btn-collapse',
handler : function() {
Ext.getCmp(_cfg.id).collapseAll();
}
}
]}),
loader : new Ext.tree.TreeLoader({
url:this.url
}),
root : new Ext.tree.AsyncTreeNode({
expanded : true
}),
rootVisible : false
});
//初始化右键的菜单
this.initContextMenu();
},//end of constructor
// initComponent: function(){
// htsoft.ux.TreePanelEditor.superclass.initComponent.call(this);
// },
/**
* 右键菜单
*/
initContextMenu:function(){
if(this.showContextMenu){
this.contextMenu= new Ext.menu.Menu({});
if(this.contextMenuItems!=null){
this.contextMenu.add(this.contextMenuItems);
}
//树的右键菜单的
this.on('contextmenu', this.contextHandler, this);
}
},
contextHandler:function contextmenu(node, e) {
this.selectedNode = new Ext.tree.TreeNode({
id : node.id,
text : node.text
});
this.contextMenu.showAt(e.getXY());
}
});
Ext.reg("treePanelEditor",htsoft.ux.TreePanelEditor);
使用如下所示:
{
xtype:'treePanelEditor',
id:'archivesTypeTree',
region : 'west',
title:'公文分类',
collapsible : true,
split : true,
width:200,
url:__ctxPath+'/archive/treeArchivesType.do',
contextMenuItems:[
{
text : '新建分类',
scope : this,
iconCls:'btn-add',
handler : function(){
new ArchivesTypeForm().show();
}
}, {
text : '修改分类',
scope : this,
iconCls:'btn-edit',
handler: function(){
new ArchivesTypeForm({typeId:Ext.getCmp('archivesTypeTree').selectedNode.id}).show();
}
},{
text : '删除分类',
scope : this,
iconCls:'btn-delete',
handler : function(){
var typeId=Ext.getCmp('archivesTypeTree').selectedNode.id;
Ext.Ajax.request({
url:__ctxPath+'/archive/multiDelArchivesType.do',
params:{ids:typeId},
method:'POST',
success:function(response,options){
Ext.ux.Toast.msg('操作信息','成功删除该公文分类!');
Ext.getCmp('archivesTypeTree').root.reload();
},
failure:function(response,options){
Ext.ux.Toast.msg('操作信息','操作出错,请联系管理员!');
}
});
}
}
]
}
- 大小: 56.8 KB
分享到:
相关推荐
这个“EXT3横向菜单”可能是指一个专门针对EXT3文件系统的图形用户界面(GUI)工具,它以横向布局展示菜单选项,便于用户管理EXT3文件系统。 在Linux中,文件系统是非常核心的部分,负责组织和存储数据。EXT3因其...
在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...
在描述中提到的"ext带右键菜单的树"是指在ExtJS中实现的一种交互功能,即在树形控件上通过右键点击来显示一个上下文菜单。这种功能极大地提高了用户与应用程序的交互性,使得操作更加直观和便捷。 在ExtJS中,树形...
在EXT中,实现树形菜单主要依赖于`Ext.tree.Panel`组件,这个组件用于展示层次结构的数据。 1. **树形菜单基础** 树形菜单是一种具有层级结构的界面元素,通常用于表示文件系统、组织结构或导航菜单。在EXT中,`...
通过该工具,用户可以直观地添加、删除、修改启动菜单项,并预览修改结果,降低了编辑菜单配置的难度。 总之,DOS菜单编辑器和GRUB4DOS内置菜单编辑器是系统管理员和高级用户的得力助手,它们提供了一个高效且灵活...
在给定的标题“Ext 两种树形菜单”中,我们可以推测这是一个关于使用Ext JS框架创建两种不同样式或功能的树形菜单的示例。Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用,它提供了丰富的组件和API来...
EXT中文可视化编辑器是一款专为EXT框架开发设计的可视化开发工具,它提供了便捷的界面,使得开发者无需编写复杂的JavaScript代码,就能创建出丰富的Web应用程序。EXT Design中文版将原本复杂的过程简化,使得开发者...
在本文中,我们将深入探讨如何使用XML来构建EXT框架中的动态树形菜单。EXT是一个流行的JavaScript库,用于创建丰富的用户界面,而XML则是一种结构化的数据格式,常用于存储和交换数据。结合两者,我们可以创建出功能...
"EXT编辑器"是一款专为EXT框架设计的可视化开发工具,它旨在简化和加速EXT应用的构建过程。EXT是一个强大的JavaScript库,主要用于创建富互联网应用程序(RIA),它提供了丰富的组件库,包括表格、面板、菜单、窗口...
Ext 编辑器,一款很强大的Ext可视化编辑器的开发工具。很大程度提高开发效率。
用Ext的Panel实现了简单布局,并在左侧显示树形菜单
EXT可视化编辑器是一种基于Web的所见即所得(WYSIWYG)编辑工具,它专为开发者和设计者提供了一种高效的方式来创建和编辑交互式的用户界面。EXT库是其核心,它是一个强大的JavaScript框架,用于构建富互联网应用程序...
EXT可视化编辑器 Ext Designer Preview 破解版, EXT的可视化编辑,实现直接拖动即可生成EXTJS代码,方便快捷。 安装后直接使用,如需导出代码,请下载本人发布的代码生成补丁。
Ext IDE 是一个强大的可视化编辑器,专为EXTJS框架设计,极大地简化了EXTJS应用的开发过程。EXTJS是一个流行的JavaScript库,用于构建富客户端Web应用程序,它提供了丰富的组件库和灵活的布局管理。在传统的EXTJS...
在EXT JS应用系统中,智能树形菜单是一种常见的交互组件,它允许用户通过层次结构来组织和导航数据。本文将深入探讨如何利用加权双历树(Weighted Bi-Layer Tree,WBLT)实现这样的功能,以及EXT JS库中的相关技术。...
EXT文件系统家族是Linux系统中最常见的默认文件系统,每个版本都在前一个的基础上进行了改进和增强,如EXT3引入了日志记录功能,EXT4则进一步优化了性能和扩展性。 【压缩包子文件的文件名称列表】:tree1.jsp、js ...
3. **代码生成**:编辑器会自动生成EXT框架兼容的JavaScript代码,开发者可以专注于逻辑处理而不是布局细节。 4. **模板和布局管理**:提供多种布局模板,如网格布局、绝对布局等,方便快速搭建页面结构。 5. **...
### EXT带右击菜单的树知识点解析 #### 一、EXT简介及应用场景 EXT是一个功能强大的JavaScript库,用于构建交互式Web应用程序。它基于YUI(Yahoo! User Interface Library),并扩展了YUI的功能,提供了丰富的用户...
ext布局和菜单设计整理
3. `MzTreeView1.2.js`:这可能是名为MzTreeView的JavaScript库的1.2版本,虽然不是Ext JS,但可能被用作辅助实现下拉树功能的脚本,或者是一个自定义的树形视图组件。 4. `TSelect.js`:这个文件名暗示可能是一个...