`

EXTJS树形菜单

    博客分类:
  • EXT
阅读更多
树节点的定义如下:
var node = new Ext.tree.TreeNode(...);



var root = new Ext.tree.TreeNode({
			text : '系统说明',
			url : 'pagesExt/about.jsp',
			expanded : true//默认展开根节点
		});
		var node1 = new Ext.tree.TreeNode({
			text : '书籍类型维护',
			url : 'bookext.do?method=showBookTypeList'
		});
		var node2 = new Ext.tree.TreeNode({
			text : '书籍维护',
			url : 'bookext.do?method=showBookList'
		});
		root.appendChild(node1);//添加子节点
		root.appendChild(node2);//添加子节点


Ext.TreePanel 的使用:
TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头


TreeNode的基本配置参数:
hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要Ext.QuickTips.init();下
7.text:"节点文本"//节点文本
8.singleClickExpand:true//用单击文本展开,默认为双击






var menu = new Ext.tree.TreePanel({
			border : false,
			root : root,
			hrefTarget : 'mainContent',
			listeners : {
				click : function(node,e){
					mainPanel.load({
						url:node.attributes.url,
						callback : function(){
							mainPanel.setTitle(node.text);
						},
						scripts: true
					});
				}
			}
			,
			tbar : [
				'皮肤选择:',
				{
					xtype : 'themeChange',
					width : 80,
					listWidth : 80
				},
				'->'
			]
		});	




Ext.Viewport:代表浏览器窗口的整个显示区域,将document body作为渲染对象,它会根据浏览器窗口的大小自动调整自身的尺寸。
在一个页面中只允许出现一个Viewport实例,没有提供对滚动条的支持。



代码如下:
    	new Ext.Viewport({
			title : 'Ext.Viewport示例',
			layout:'border',//表格布局
			items: [{
				title : '简易书籍管理系统ExtJs版',
				collapsible: true,
				html : '<br><center><font size = 6>简易书籍管理系统</font></center>',
				region: 'north',//指定子面板所在区域为north
				height: 100
			},{
				title : '功能菜单',
				items : menu,
				split:true,
				collapsible: true,
				region:'west',//指定子面板所在区域为west
				width: 150
			},{
				title: '系统说明',
				contentEl : 'aboutDiv',
				collapsible: true,
				id : 'mainContent',
				region:'center'//指定子面板所在区域为center
			}]
		});

分享到:
评论
1 楼 itf2008 2012-10-11  
Ext.override(Ext.tree.TreeNodeUI, {
onDblClick : function(e) {
e.preventDefault();
if (this.disabled) {
return;
}
if (this.checkbox) {
this.toggleCheck();
}
if (!this.animating && this.node.hasChildNodes()) {
var isExpand = this.node.ownerTree.doubleClickExpand;
if (isExpand) {
this.node.toggle();
};
}
this.fireEvent("dblclick", this.node, e);
}
});


这样就可以了

相关推荐

    ExtJS5树形菜单

    在ExtJS5中,树形菜单(Tree Menu)是一种常见的UI组件,它允许用户以层次结构的方式展示数据,非常适合用于目录浏览、文件系统导航或者复杂的组织结构展示。在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法...

    使用ExtJs构建树形菜单功能

    ### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中,树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系,尤其是在展示组织架构、文件系统或者任何有层级结构的...

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

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

    ExtJS5.0 树形菜单实例

    下面我们将深入探讨如何利用ExtJS 5.0 创建一个树形菜单实例。 1. **TreePanel 基础** TreePanel 是ExtJS 中用于展示树状数据的组件,它允许用户展开和折叠节点,进行选择和编辑操作。创建一个TreePanel 需要定义...

    Extjs 无限树菜单 后台拼接json

    "Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据,并通过JSON格式传输到前端进行渲染。 首先,我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...

    extjs实现动态树加载菜单

    它提供了丰富的组件库,包括数据绑定、布局管理、图表以及我们今天要讨论的重点——动态树形菜单。动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次...

    extJs树形框架(一个例子)

    这个“ExtJS树形框架(一个例子)”示例项目展示了如何利用ExtJS创建一个与后端Oracle数据库、iBATIS持久层框架和Struts MVC框架交互的树形界面。下面,我们将深入探讨这些技术以及它们在该项目中的应用。 1. **...

    ExtJs树形结构 ext的简单应用

    综上所述,ExtJs树形结构提供了一种直观且灵活的方式来展示和操作层次化数据,通过理解和掌握其基本用法和扩展功能,开发者可以构建出满足各种需求的树形界面。在项目中,可以结合具体业务需求,进行个性化定制,...

    ext树形动态菜单 .doc

    综上所述,这段代码实现了前端与后端之间的交互,前端通过 JavaScript 和 ExtJS 框架来构建和渲染树形菜单,而后端则通过 Java 来处理数据逻辑,实现数据的查询和转换,最终将处理好的数据以 JSON 格式返回给前端...

    extjs开发的权限系统(树形菜单复选框可级联选择)

    使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ,用户角色权限菜单的维护 jar文件删了一些,需要用的自己加包

    ExtJS树形结构.docx

    在EXTJS中,树形结构(Tree)是一种用于展示层级数据的组件,它允许用户以图形化的方式浏览和操作层次关系。以下是对标题和描述中所述...这种树形结构常用于展示具有层次关系的数据,例如组织结构、文件系统或菜单等。

    extjs 树 搜索

    树形控件可以被广泛应用于文件系统、组织架构、菜单等场景。当我们需要在这些大量的层次数据中查找特定信息时,搜索功能就显得尤为重要。EXTJS提供了树形搜索的功能,使得用户可以方便快捷地定位到所需内容。 EXTJS...

    ext 实例 示例 实例 示例

    树形菜单是EXTJS 提供的一种组件,它以层级结构展示数据,通常用于表示具有父/子关系的数据集合,如文件系统、组织结构或导航菜单。 创建EXTJS 树形菜单通常涉及以下步骤: 1. **配置树节点**:树形菜单的基础是树...

    tree 动态树 extjs ajax

    总的来说,通过理解并熟练运用这些知识点,开发者可以创建出交互性强、性能优秀的动态树视图,适用于各种需要展现层级结构数据的场景,如组织架构、文件系统、菜单导航等。同时,与Ajax的结合使用,使得这种视图在...

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    2. **EXTJS树菜单**: EXTJS中的树菜单(TreeMenu)是TreePanel的一个变体,通常用作下拉菜单。它结合了树的层次结构和菜单的功能,用户可以通过选择不同的菜单节点来执行相应的操作。这种设计使得复杂的操作结构变...

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    Extjs树Demo

    7. **API和文档**:学习ExtJS树形结构的最佳资源是官方文档,其中详细介绍了各种配置项、方法和事件,同时还有很多示例代码供参考。 通过上述步骤,你可以创建出具有交互性的、动态加载数据的ExtJS树形结构。在实际...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    ExtJs树例子

    这有助于深入理解ExtJS树形控件的实现细节。 9. **调试与测试**:学习过程中,使用浏览器的开发者工具(如Chrome DevTools)可以帮助我们调试代码,查看网络请求,检查元素样式,以及追踪事件处理流程。 总结来说...

Global site tag (gtag.js) - Google Analytics