Ext.tab.Panel页签

　　Ext.tab.Panel页签组件的每个tab都是一个Ext.panel.Panel，一般情况会有多个tab同时存在，但是同一时刻只有一个处于激活状态。

　　Ext.tab.Panel主要配置项目表：

配置项参数类型说明
activeTab String/Number 设置默认激活的tab也，参数为tab页的id或索引值
layout Object tabPanel内置的card布局
minTabWidth Number tab标签的最小宽度，默认为30
plain Boolean true则不显示TabBar的完整背景，默认为false
removePanelHeader Boolean true则通知子元素全部不渲染header标题栏，这样可以防止子元素标题重复显示2次，默认为true
tabBar Object 配置内置Ext.tab.TabBar的配置对象
tabPosition String 设置页签按钮的显示位置，有效值为top和bottom，默认为top

　　Ext.tab.Bar主要配置项目表：

配置项参数类型说明
maxTabWidth Number 设置标签按钮的最大宽度
minTabWidth Number 设置标签按钮的最小宽度
plain Boolean true则不显示TabBar的完整背景，默认为false

　　1、通过items添加标签页

　　代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.tab.Panel</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             Ext.create("Ext.tab.Panel", {
10                 title: "Ext.tab.Panel示例",
11                 frame: true,
12                 height: 150,
13                 width: 300,
14                 activeTab: 1, // 默认激活第2个tab页
15                 renderTo: Ext.getBody(),
16                 items: [{
17                     title: "tab标签页1",
18                     html: "tab标签页1内容"
19                 }, {
20                     title: "tab标签页2",
21                     html: "tab标签页2内容"
22                 }, {
23                     title: "tab标签页3",
24                     html: "tab标签页3内容"
25                 }, {
26                     title: "tab标签页4",
27                     html: "tab标签页4内容"
28                 }, {
29                     title: "tab标签页5",
30                     html: "tab标签页5内容"
31                 }, {
32                     title: "tab标签页6",
33                     html: "tab标签页6内容"
34                 }]
35             });
36         });
37     </script>
38 </head>
39 <body>
40 </body>
41 </html>

　　效果图：

　　2、动态添加标签页

　　代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.tab.Panel</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var tabPanel = Ext.create("Ext.tab.Panel", {
10                 title: "Ext.tab.Panel示例",
11                 frame: true,
12                 height: 150,
13                 width: 300,
14                 activeTab: 0, // 默认激活第一个tab页
15                 renderTo: Ext.getBody(),
16                 items: [{
17                     title: "tab标签页1",
18                     html: "tab标签页1内容"
19                 }],
20                 buttons: [{
21                     text: "添加标签页",
22                     handler: addTab
23                 }]
24             });
25 
26             function addTab() {
27                 var index = tabPanel.items.length + 1;
28                 var tab = tabPanel.add({
29                     title: "tab标签页" + index,
30                     html: "tab标签页" + index + "内容",
31                     closable: true  // 允许关闭
32                 });
33 
34                 tabPanel.setActiveTab(tab); // 设置当前tab页
35             }
36         });
37     </script>
38 </head>
39 <body style="margin: 10px;">
40 </body>
41 </html>

　　效果图：

posted @ 2012-04-10 21:26  libingql  阅读(22234)  评论(1)  编辑  收藏  举报