`
sp42
  • 浏览: 147291 次
  • 来自: Canton
文章分类
社区版块
存档分类
最新评论

TabPanel基础

EXTCSS配置管理浏览器资讯 
阅读更多
摘要

这份教程目的在于对TabPanel类进行一次快速介绍。所提及的知识都是来自我对TabPanel范例、Ext源码和API文档的学习。到本文最后，你应该完成好一个Tab Panel，这个TabPanel能够：

    * 创建新tab，其内容来自一个URL。
    * 判断某个tab是否存在，有的话加载新内容。

Step 1: 创建 HTML 骨架

我们将会用下列HTML，和Ext一齐构建一个基本的结构。复制这些内容到一个叫tptut.heml的文件，并要求是运行在服务端的，当然 也要保证ext-all.css, ext-base.js, 和 ext-all.js这些Ext安装路径的正确。然后按照以下步骤创建tab_actions.js: 
<html>
<head>
<title>TabPanel教程</title>
<!-- Ext CSS and Libs -->
<link rel="stylesheet" type="text/css"	href="../include/ext2/resources/css/ext-all.css" />
<script type="text/javascript"	src="../include/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../include/ext2/ext-all.js"></script>
 
<!-- Custom CSS and Libs -->
<script type="text/javascript" src="./tab_actions.js"></script>
<style>
#actions li {
	margin:.3em;
}
#actions li a {
	color:#666688;
	text-decoration:none;
}
</style>
</head>
<body>
 
 
<ul id="actions" class="x-hidden">
	<li>
		<a id="use" href="#">Use Existing Tab</a>
	</li>
	<li>
		<a id="create" href="#">Create New Tab</a>
	</li>
</ul>
 
<div id="tabs"></div>
</body>
</html>


以上代码有两个地方的元素需要注意。我们将使用"actions"(动作列表)这种简易的实现来执行tab的创建。"tabs"的那个div将用于Tab面板中第一个默认tab的容器。
Step 2: Ext结构的构建

在刚才那个目录中创建一个文文件。就叫做作tab_actions.js，加入下面JavaScript: 

Ext.onReady(function(){
   // 包含actions的菜单
    var tabActions = new Ext.Panel({
    	frame:true,
    	title: 'Actions',
    	collapsible:true,
    	contentEl:'actions',
    	titleCollapse: true
    });
 
    // 保持actions菜单的父面板
    var actionPanel = new Ext.Panel({
    	id:'action-panel',
    	region:'west',
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:200,
    	minWidth: 150,
    	border: false,
    	baseCls:'x-plain',
    	items: [tabActions]
    });
 
    // 主面板（已有tab）
    var tabPanel = new Ext.TabPanel({
		region:'center',
		deferredRender:false,
		autoScroll: true, 
		margins:'0 4 4 0',
		activeTab:0,
		items:[{
			id:'tab1',
			contentEl:'tabs',
    		title: 'Main',
    		closable:false,
    		autoScroll:true
		}]
    });
 
    //  配置视图viewport
    viewport = new Ext.Viewport({
           layout:'border',
           items:[actionPanel,tabPanel]});
});


上面的代码被套上一个Ext.onReady的函数,以防止页面元素未全部加载就执行代码了。接着要做的事情是将我们的动作列表（Action list）转换到名字为tabActions的那个面板，该命名是由contentEl (content element)（内容元素）这个配置项参数所指定的。

接着，创建一个父面板actionPanel来保持菜单面板。我们已tabActions 作为一个item项的参数。由于actionPanel会由视图Viewport的LayoutManager来页面定位，所以我们须在配置项对象中指定一个区域。

第三个步骤是创建TabPanel(Tab面板)本身。我们想在页面居中，即是对应于视图的中部。还要将一系列的tab配置项对象参数传入到面板中。在这里例子中,参与内置渲染的只有一个tab，但是多个也是可以的。如能确定每个面板在页面上能够被当作容器使用，便可以成为该数组的元素。像当前的情况，我们是把tabs作为第一个面板的内容元素。 要注意，我们这指出了tab的Id。这就是我们稍后获取的tab的依据。

最后，我们设置视图， 用于浏览器可视区域的控制。 所需要做的就是指定一个布局（layout）和什么要显示的组件。组件已经由视图的LayoutMangager（视图管理器）配置好适合放置的区域。

这时，你应该在浏览器观察到，包含Acitons菜单的两个格式化列在左边，tab面板占据了屏幕的其余位置。
Step 3: 创建Tab控制逻辑

现在我们所需的元素已经创建好了， 可以增加Tab面板的创建（creating）和更新（updating）方法。 在当前目录中新建三个页面以便我们的测试：

    * loripsum.html
    * sample0.html
    * sample1.html

这三分文件的实际内容无关紧要， 但最好是每份的内容应该有所不同，好让tab加载内容后区别开来。

打开tab_actions.js，在viewport创建的位置插入下列代码： 
// 在中间的面板加入tab
    function addTab(tabTitle, targetUrl){
        tabPanel.add({
	    title: tabTitle,
	    iconCls: 'tabs',
	    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
	    closable:true
	}).show();
    }
 
    // 更新tab内容，如不存在就新建一个
    function updateTab(tabId,title, url) {
    	var tab = tabPanel.getItem(tabId);
    	if(tab){
    		tab.getUpdater().update(url);
    		tab.setTitle(title);
    	}else{
    		tab = addTab(title,url);
    	}
    	tabPanel.setActiveTab(tab);
    }
 
    // 映射连接的id到函数
    var count = 0;
    var actions = {
    	'create' : function(){
    		addTab("New Tab",'loripsum.html');
    	},
    	'use' : function(){
    		// 演示页之间的轮换
    		updateTab('tab1','替换' + count + ' 次','sample'+(count%2)+'.html');
    		count++;	    		
    	}
    };
 
    function doAction(e, t){
    	e.stopEvent();
    	actions[t.id]();
    }
 
    // body初始化后，viewport setup过后才能执行下面的代码
    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});


函数addTab(...) 需要标题title和URL字符串两个参数，然后传递到tabPanel.add(...)里的配置项对象。 这会返回创建好的面板对象，上面的代码立即调用了show()方法显示内容。

函数updateTab(...) 需要多个tabId的参数，以便能检测这个tab是否存在。如果是，面板会获取Updater进行面板内容的更新。若然不是，会调用addTab(...)创建tab。

最后一个步骤， 增加一个actionPanel的监听器，来响应选区动作之后的事件后，执行相应的函数。先要说明的是，actions是一创建好的对象，对象可被认为是一种哈希表（HashTable）或是字典（Dictionary），一一映射了动作和方法两者。注意“键key”对应于HTML list项。 由于方法比较简单，我们就直接这里写好了。变量counter用于清晰显示tab之间的切换，没有其他特定的功能。


事件处理器（event handler）doAction(...)执行时会有两个参数传入：事件对象和目标对象，actions函数查找目标对象的id然后执行相应的方法。 当任意一个actionPanel's的组件被按下，将会触发mousedown的事件，侦听器立即通知已登记的事件处理器doAction(...)运行。 被按下的那个组件便是事件对象的目标。


总结

现在刷新tptut.html看看，已经是完成好的例子了。

点击Use Existing Tab的连接会更新第一个tab的内容。Create new Tab会创建一个新的已是按下的tab。 更多资讯，请参阅Tab标签页进阶范例。

由 "http://www.ajaxjs.com/article/2007111712353502.asp" 接收
分享到：
| 从源码生成Ext
评论
2 楼 sp42 2008-03-17  
你要将TABLE转换为EXT的PANEL对象插入到tabPanel中，或者指定这个Panel的ContentEl；
又或者应用Ajax生成内容的几种模式，灵活使用autoLoad
1 楼 好老头 2008-03-11  
   我照着你的例子做了一遍,有个问题请教一下,如何将一个声明好的表格通过addTab函数加到新建的tab面板中?
我想直接加个参数items[grid],或者在另外一个html文件中将表格生成,通过参数传入这个html的地址,两种方法都行不通,请问我该怎样做?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    TabPanel选卡结合右键菜单实例

    1. **创建TabPanel**：使用HTML和CSS构建基础的TabPanel结构，通常包括一个容器元素和一组表示各个选项卡的元素。使用jQuery，可以通过监听点击事件动态地显示和隐藏内容区域。 2. **添加右键事件监听器**：为...

    ExtJS扩展：垂直页签tabPanel

    TabPanel.js可能是基础的TabPanel类，而TabPanel2.js可能包含了垂直页签的扩展或改进。在ExtJS中，扩展通常用于添加新功能或改变现有组件的行为。因此，TabPanel2.js可能定义了一个新的配置选项或者覆盖了一些默认...

    EXT简体中文参考手册（PDF&CHM电子档）

    目录 EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始！ 4 Element：Ext的核心 4 获取多个DOM的节点 5 ...TabPanel基础 94 Step 1: 创建 HTML 骨架 94 Step 2: Ext结构的构建 96 Step 3: 创建Tab控制逻辑 97

    TabPanel效果，比较有用，收藏先。

    1. **HTML和CSS**：基础的HTML结构，比如`&lt;div&gt;`和`&lt;ul&gt;`标签，用于构建TabPanel的框架；CSS用于样式化标签和内容区域，实现布局和视觉效果。 2. **JavaScript/jQuery**：通常使用JavaScript来处理用户交互，如点击...

    ExtJS帮助文档

    #### TabPanel基础 `TabPanel`是一个可以用来组织多个面板的容器组件，每个面板都可以通过标签进行切换。 1. **Step1: 创建HTML骨架** ```html &lt;div id="tabpanel"&gt; ``` 2. **Step2: 构建Ext结构** ```...

    EXT 中文帮助手册

    85 Element：Ext的核心 86 获取多个DOM的节点 87 响应事件 87 使用Widgets 88 編輯 使用Ajax 91 TabPanel基础 94 Step 1: 创建 HTML 骨架 94 Step 2: Ext结构的构建 96 Step 3: 创建Tab...

    EXT 中文手册

    #### 五、TabPanel基础 - **TabPanel** 是 EXT 中用于创建选项卡界面的组件，常用于组织内容和提高用户界面的可用性。 - **Step1: 创建HTML骨架**：首先需要创建 HTML 页面的基本结构，定义选项卡面板所需的容器...

    如何在MATLAB中做出标签页的效果-tabpanel2.6.zip

    各位可以仿照程序的编写方法在它的基础上创建控件。 另外还有一种方法，就是我前一阵子写程序时用的，就是与JAVA混合编程。这个就比较麻烦了，对JAVA甚至C 一窍不通的就掠过吧。这其中涉及到了JAVA的布局、容器、...

    EXT中文手册 Grid Form

    #### TabPanel基础 TabPanel组件是EXT提供的一个高级组件，用于创建标签页式的用户界面。它允许用户通过点击不同的标签来切换显示不同的内容区域。 **Step1: 创建HTML骨架** 首先需要定义一个容器元素，作为...

    EXT最新使用手册

    TabPanel基础 - **创建步骤**: 1. **创建HTML骨架**: 定义基本的HTML结构。 2. **构建Ext结构**: 使用Ext API初始化TabPanel。 3. **创建Tab控制逻辑**: 编写JavaScript代码控制Tab的显示和切换。 #### 8. EXT...

    doc格式 ext EXT 中文手册

    TabPanel基础 - **TabPanel**: 一种用于实现标签页式布局的组件。 - **创建步骤**: 1. **创建HTML骨架**: 构建基本的HTML结构。 2. **构建Ext结构**: 初始化Ext框架。 3. **创建Tab控制逻辑**: 编写用于控制...

    ExtJS中文手册.pdf

    - **TabPanel基础**：TabPanel是EXT中用于创建标签页的一种容器组件。包括创建HTML骨架、构建EXT结构以及创建Tab控制逻辑等内容。 - **EXT2简介**：虽然手册主要介绍的是EXT早期版本的内容，但也有部分章节提到了...

    javascritp+css+tabpanel的实现

    在这个“javascript+css+tabpanel的实现”中，我们将深入探讨如何使用HTML、JavaScript和CSS来创建一个功能完备且交互友好的Tab Panel系统。 首先，HTML是构建页面结构的基础。Tab Panel的基本HTML结构通常包括一个...

    Ext中文手册

    **TabPanel基础** - **HTML骨架**：构建TabPanel所需的HTML结构。 - **Ext结构构建**：使用Ext的API初始化TabPanel。 - **Tab控制逻辑**：实现Tab之间的切换逻辑。 #### 9. **EXT源码概述** - **源码结构**：...

    tapestry4.02中封装ext的TabPanel组件

    在这个文件中，你可能会看到一个Tapestry组件类，它扩展了Tapestry的基础组件，并实现了TabPanel的功能。可能包含属性来定义TabPanel的各个部分，如标签数组、内容组件等，以及处理用户交互的事件方法。 2. ...

    matlab算法源码Matlab/TabPanel源码

    尽管以上信息有助于理解Matlab和TabPanel的基础概念，但要获得“Matlab算法源码Matlab/TabPanel源码”的具体内容，您需要访问提供源码的链接。在这个案例中，提供的链接是百度网盘的分享地址，您需要下载相应的文件...

Magicbox
Global site tag (gtag.js) - Google Analytics