树节点的定义如下:
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
}]
});
分享到:
相关推荐
在ExtJS5中,树形菜单(Tree Menu)是一种常见的UI组件,它允许用户以层次结构的方式展示数据,非常适合用于目录浏览、文件系统导航或者复杂的组织结构展示。在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法...
### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中,树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系,尤其是在展示组织架构、文件系统或者任何有层级结构的...
在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...
下面我们将深入探讨如何利用ExtJS 5.0 创建一个树形菜单实例。 1. **TreePanel 基础** TreePanel 是ExtJS 中用于展示树状数据的组件,它允许用户展开和折叠节点,进行选择和编辑操作。创建一个TreePanel 需要定义...
"Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据,并通过JSON格式传输到前端进行渲染。 首先,我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...
它提供了丰富的组件库,包括数据绑定、布局管理、图表以及我们今天要讨论的重点——动态树形菜单。动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次...
这个“ExtJS树形框架(一个例子)”示例项目展示了如何利用ExtJS创建一个与后端Oracle数据库、iBATIS持久层框架和Struts MVC框架交互的树形界面。下面,我们将深入探讨这些技术以及它们在该项目中的应用。 1. **...
综上所述,ExtJs树形结构提供了一种直观且灵活的方式来展示和操作层次化数据,通过理解和掌握其基本用法和扩展功能,开发者可以构建出满足各种需求的树形界面。在项目中,可以结合具体业务需求,进行个性化定制,...
综上所述,这段代码实现了前端与后端之间的交互,前端通过 JavaScript 和 ExtJS 框架来构建和渲染树形菜单,而后端则通过 Java 来处理数据逻辑,实现数据的查询和转换,最终将处理好的数据以 JSON 格式返回给前端...
使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ,用户角色权限菜单的维护 jar文件删了一些,需要用的自己加包
在EXTJS中,树形结构(Tree)是一种用于展示层级数据的组件,它允许用户以图形化的方式浏览和操作层次关系。以下是对标题和描述中所述...这种树形结构常用于展示具有层次关系的数据,例如组织结构、文件系统或菜单等。
树形控件可以被广泛应用于文件系统、组织架构、菜单等场景。当我们需要在这些大量的层次数据中查找特定信息时,搜索功能就显得尤为重要。EXTJS提供了树形搜索的功能,使得用户可以方便快捷地定位到所需内容。 EXTJS...
树形菜单是EXTJS 提供的一种组件,它以层级结构展示数据,通常用于表示具有父/子关系的数据集合,如文件系统、组织结构或导航菜单。 创建EXTJS 树形菜单通常涉及以下步骤: 1. **配置树节点**:树形菜单的基础是树...
总的来说,通过理解并熟练运用这些知识点,开发者可以创建出交互性强、性能优秀的动态树视图,适用于各种需要展现层级结构数据的场景,如组织架构、文件系统、菜单导航等。同时,与Ajax的结合使用,使得这种视图在...
2. **EXTJS树菜单**: EXTJS中的树菜单(TreeMenu)是TreePanel的一个变体,通常用作下拉菜单。它结合了树的层次结构和菜单的功能,用户可以通过选择不同的菜单节点来执行相应的操作。这种设计使得复杂的操作结构变...
在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...
7. **API和文档**:学习ExtJS树形结构的最佳资源是官方文档,其中详细介绍了各种配置项、方法和事件,同时还有很多示例代码供参考。 通过上述步骤,你可以创建出具有交互性的、动态加载数据的ExtJS树形结构。在实际...
在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...
这有助于深入理解ExtJS树形控件的实现细节。 9. **调试与测试**:学习过程中,使用浏览器的开发者工具(如Chrome DevTools)可以帮助我们调试代码,查看网络请求,检查元素样式,以及追踪事件处理流程。 总结来说...