在实际的项目中，左边树形菜单，提供各种功能点击，右边一个面板，随着左边节点的选择表现不同的功能内容，这是一个相当经典的布局，在Ext框架中，有两个控件TreePanel和TabPanel刚好完成这些功能，本文就这两个控件的搭配使用和点击左边树节点引起右边内容变化的方法作一个简单的介绍。首先看下面的具体的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabPanel和Tree控件搭配测试</title>
<link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
//左边功能树
var menuTree = new Ext.tree.TreePanel({
region:'west',
title:'功能菜单',
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
rootVisable:false, //不显示根节点
root:new Ext.tree.TreeNode({
id:'root',
text:'功能菜单',
draggable:false,
expanded:true
})
});
//添加第一个节点(html)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'htmlPanel',
text:'通过html打开',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="iframe.html"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
}));
//添加第二个节点(autoLoad)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'autoLoadPanel',
text:'通过autoLoad打开',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { ////判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true,
autoLoad:{url:'auto.php', scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
}
}
}));
//添加第三个节点(function)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'functionPanel',
text:'通过函数打开',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) {
var p = new fnPanel();
p.id = node.id;
p.title = node.text;
n = contentPanel.add(p);
}
contentPanel.setActiveTab(n);
}
}
}));
//通过扩展来构建要创建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit', //如果用函数来创建该面板的话,布局必须设置为fit,否则不会显示该面板中的内容
//创建面板内容
createFormPanel:function() {
return new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
frame:false,
bodyBorder:false,
bodyStyle:'padding:25px',
items:[{
xtype:'textfield',
fieldLabel:'用户名',
width:350,
name:'username'
},{
xtype:'textfield',
fieldLabel:'密 码',
width:350,
name:'password'
}],
buttons:[{text:'登陆'}, {text:'取消'}]
});
},
//重装控件初始化函数,在该函数中完成面板中内容的初始化
initComponent:function() {
fnPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
}]
});
Ext.onReady(function(){
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
items:[menuTree, contentPanel]
});
});
</script>
</head>
<body>
</body>
</html>
上面代码中，构建了两个控件menuTree和contentPanel，menuTree用来显示具体功能菜单，contentPanel用来展示具体功能内容，menutTree中的节点是通过appendChild()方法手动加上去的，而且为了介绍方便，每个节点都添加了一个处理点击事件的函数，在具体应用中，还可以使用AsyncTreeNode()和TreeLoader()动态载入节点，下面着重介绍点击树节点引起功能区变化的方法，上面代码中用到了三种方法。
（1）通过TabPanel控件的html属性配合<iframe>实现。该方法是利用html属性中包含<iframe>的语法来调用另一个页面，具体见代码。该方法实现比较简单，只要重新编辑一个html文件即可以了，而且如果要在新生成的页面中再使用Ext的控件也比较简单，也比较好控制，只要像一个页面情况下使用就可以了，因为他本身就是一个完整的html文件。而该方法的缺点就是资源占用厉害，是三种方法中占有最厉害的，而且还有Ext的重复加载的问题（不知道Ext库中考虑这种情况了没有），另外就是新的页面载入速度也是最慢的。
（2）通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性，它有很多参数，其中有两个比较重要，url表示要载入的文件，scripts表示载入的文件是否含有脚本，该属性相当重要，如果在新的页面中要创建Ext控件，必须指定该参数。该方法实现较前一个复杂，因为引入的文件不是一个完整的html文件，有可能只是内容的一部分，但是资源占用较少，而且载入速度较快（它有一个载入指示），但缺点就是如果是载入的是一个单纯html文件(*.html)，在字符编码上处理很麻烦，经常出现乱码，我提供的源码中是一个PHP文件，用PHP文件也只是一个作用，改变输出的字符编码，用html能够实现同样的功能，但会是乱码，我不知道怎样解决这个问题。
（3）通过自己构建新的面板来实现。该方法是通过继承Panel面板，然后在该面板中加入要显示的内容，再重载initComponet()方法，最后把该面板添加到TabPanel中，该方法中一个要注意的地方，新生成的页面布局一定要用fit，否则该面板中的内容不能显示出来。该方法是所有方法中最复杂的，而且由于采用了fit布局，新生成的页面中的元素不好控制，我例子中的表单就生成的比较乱。但载入速度是最快的，可能是少了载入指示吧，资源占用跟第二种方法差不多。
上面三种方法中，我比较喜欢第二种实现方面，简单好控制，而且还有一个载入指示。不知道大家有没有其他的方法。一起讨论讨论。
分享到：
相关推荐
在本文中，我们将深入探讨ExtJS库中的两个关键组件：TreePanel和TabPanel，并结合实际测试情况来理解它们如何协同工作。ExtJS是一款强大的JavaScript框架，用于构建富客户端应用程序，而TreePanel和TabPanel是其核心...
在本文中，我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件，并讨论如何将它们结合在一起，以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据，而`TabPanel`则提供了多标签页的功能，两者...
描述中提到"EXT的所有控件以及控件的用法及代码"，这暗示了压缩包内可能包含每个EXT控件的演示、文档和源代码，帮助开发者理解和学习EXT控件的完整功能和实现方式。EXT控件包括但不限于以下几种： 1. GridPanel：...
资源包中的"extdemo"可能包含了这些示例的源代码和运行脚本，通过查看和运行这些代码，你可以更直观地学习EXTJS的用法，加深对EXTJS组件和API的理解。记得结合EXTJS的官方文档和社区资源，以便更深入地探索EXTJS的...
BoxComponent是Ext中的基本布局容器，可以用来控制子元素的位置和大小。通过调整BoxComponent的配置选项，开发者可以实现灵活的布局设计。 ##### 2. **Button（按钮组件）** Button组件是Web应用中最常见的交互...
- EXT2引入了许多新组件，如TreePanel、Viewport等，进一步增强了其功能性和灵活性。 通过以上介绍，我们不难发现，EXT不仅仅是一个简单的JavaScript库，而是一个功能强大、设计完善的前端开发框架。无论是对于...
- **功能描述**：Component 是所有 Ext 组件的基础类，它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**：作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...
3. 控件使用方法：EXT.NET框架提供了多种控件，如GridPanel（表格）、FormPanel（表单）、TabPanel（选项卡）、Window（弹出窗口）、TreePanel（树形视图）等。每个控件都有丰富的配置项和事件处理方法，通过这些...
**Ext.tree.TreePanel** - **描述**: 树型面板，用于展示层次结构的数据。 - **用途**: 文件系统、目录结构的可视化表示。 **Ext.FlashComponent** - **描述**: 用于显示Flash内容的组件（尽管现在已很少使用）。 -...
3. 导航和布局：TabPanel允许在一个容器中创建多个选项卡，每个选项卡可以包含不同的组件。AccordionLayout和BoxLayout等布局管理器则帮助调整组件的大小和位置，以适应不同屏幕尺寸和设备。 4. 菜单和工具栏：Menu...
- **表单及元素组件**：Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel和Window等。 6. **组件的使用**： 创建组件时，需要指定其配置参数，如尺寸...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
1. 基本控件：Box、Button、ColorPalette、Component、Container、CycleButton、DataView、DatePicker、Editor、EditorGridPanel、Grid、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、...
4. **Ext.form.FormPanel** 和 表单控件： - FormPanel是用于创建表单的组件，可以设置`frame`（是否有边框）、`layout`（布局方式）、`defaults`（组件默认属性）等。例如，`layout:'column'`表示列布局，`...
这个压缩包的核心内容是演示如何在ASP.NET环境中使用ExtAspNet控件，帮助开发者快速理解和应用这个强大的前端框架。 ExtAspNet是一个专门针对ASP.NET开发的JavaScript组件库，它基于Ext JS（一个广泛使用的开源...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
### ExtJs2.0入门实例知识点详解 #### 1. Ext.MessageBox ...以上是ExtJs2.0中的一些基础控件和方法的详细介绍，通过这些内容可以帮助初学者快速入门，并掌握如何使用这些控件进行Web应用程序开发。