Tutorial:TabPanel Basics (Chinese)
From Learn About the Ext JavaScript Library
| Summary: 对Tab标签页的使用作简单地介绍 |
| Author: Robin Percy (译者：Frank Cheung) |
| Published: 2007年十一月十五号 |
| Ext Version: 2.0 |
Languages:  English Chinese German |
Contents[hide] |
摘要
这份教程目的在于对TabPanel类进行一次快速介绍。所提及的知识都是来自我对TabPanel范例、Ext源码和API文档的学习。到本文最后，你应该完成好一个Tab Panel，这个TabPanel能够：
- 创建新tab，其内容来自一个URL。
- 判断某个tab是否存在，有的话加载新内容。
步骤 1: 创建 HTML 骨架
我们将会用下列HTML，和Ext一齐构建一个基本的结构。复制这些内容到一个叫tptut.html的文件，并要求是运行在服务端的，当然 也要保证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', 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标签页进阶范例