首页 > 开发 > 综合 > 正文

TabPanel应用基础

2020-02-10 16:54:00
字体:
来源:转载
供稿:网友

目錄

1 摘要
2 Step 1: 创建 HTML 骨架
3 Step 2: Ext结构的构建
4 Step 3: 创建Tab控制逻辑
5 总结

摘要

这份教程目的在于对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面板占据了屏幕的其余位置。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表