Ext.js入门：TabPanel组件（八）

最新推荐文章于 2023-06-17 22:56:23 发布

weixin_30239339

最新推荐文章于 2023-06-17 22:56:23 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/sunliyuan/p/5843541.html

本文详细介绍了ExtJS框架中的TabPanel组件使用方法，包括基本配置、动态添加标签页、使用iframe作为内容源及添加右键菜单等功能，并提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：TabPanel组件简介

二：简单代码示例

三：使用iframe作为tab的标签页内容

四：动态添加tabpanel的标签页

五：为tabpanel标签页添加右键菜单

方式一：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            var mytable = new Ext.TabPanel({
                renderTo: Ext.getBody(),
                width: 200,
                activeTab: 0,//激活的页数
                frame: true, //出现渲染的边框
                items: [
               {
                  title:"tab1",
                  html:"tab1 content"
               },
               {
                  title:"tab2",
                  html:"tab2 content"
               }
               ]

            });
        })
    </script>
</head>
<body>

</body>
</html>

方式二：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function() {

        var tabs = new Ext.TabPanel({
            renderTo: 'my-tabs',
            activeTab: 0,
            width:200,
            items: [
                    { contentEl: 'tab1', title: 'aaa' },
                    { contentEl: 'tab2', title: 'bbb' }
            ]
        });

        });
    </script>
</head>
<body>
<div id="my-tabs">
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>
</div>

效果：

几个相关参数
1.tabPosition:“bottom”//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:“提示”//必须先调用Ext.QuickTips.init();才有效果

3、经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).
就是:使用iframe作为tab的标签页内容.

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            var testTab = new Ext.TabPanel({
                renderTo: Ext.getBody(),
                width: "100%",
                height:500,
                activeTab: 0,
                frame: true,
                items: [
                  {
                      contentEl:"mainFrame",
                      tabTip:"fengjian",
                      title:"加载页面的标签页",
                      closable: true

                  }
                ]
            });
        });
    </script>
</head>
<body style="margin:10px;">
    <div>
          <a href="javascript:void(0)" onclick="parent.frames['mainFrame'].location='http://www.cnblogs.com'">换成博客园</a>
          <iframe id="mainFrame" name="mainFrame" src="http://www.baidu.com" frameborder="0" height="500px" width="100%" ></iframe>
    </div>
</body>

</html>

点击添加新的页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            var index = 0;
            var tabsDemo = new Ext.TabPanel({
                renderTo: Ext.getBody(),
                activeTab: 0,
                height: 700,
                frame: true,
                items: [
                    {
                        title: "autoLoad为html简单页面演示",
                        autoLoad: { url: "Tab1.aspx", scripts: true }
                        
                    }
                ]
            });
            Ext.get("AddNewTab").on("click", function() {
                tabsDemo.add({
                    title: "newtab" + index,
                    id: "newtab" + index,
                   
                    html: "new tab" + index,
                    closable: true
                });
                tabsDemo.setActiveTab("newtab" + index);
                index++;
                //alert(index);
            });
        });
    </script>
</head>
<body>
    <a href="javascript:void(0)" id="AddNewTab">添加新页面</a>
</body>
</html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    aaaaaaaaaaaaaa
    </div>
    </form>
</body>
</html>

为tabpanel标签页添加右键菜单

//几个参数说明
1.enableTabScroll:true//前面已经说过了
2. listeners:{“contextmenu”:function(参数1,参数2,参数3){.}}
//右键菜单事件，三个参数分别为当前tabpanel，当前标签页panel，事件对象e

每个标签页都有激活和去激活事件

activate和deactivate，他们的执行函数有个参数，就是当前标签页。

例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
        var index = 0;
        function addTab() {
            tabsDemo.add({
                title: "tab" + index,
                id: "newtab" + index,
                html: "new tab " + index,
                closable: true
            });

            tabsDemo.setActiveTab("newtab" + index);
            index++;
        }
            var tabsDemo = new Ext.TabPanel({
                renderTo: Ext.getBody(),
                activeTab: 0,
                height: 200,
                enableTabScroll: true,
                frame: true,//透明度
                items: [{   //监听右键菜单   传递的参数：1.TabPanel  2.每一项的值 3.事件
                    title: "首页",
                    html: "first Page"
}],
                    listeners: {
                        "contextmenu": function(tdemo, myitem, e) {
                            menu = new Ext.menu.Menu([
                          {
                              text: "关闭当前页",
                              handler: function() {
                                  tdemo.remove(myitem);
                              }
                          },
                          {
                              text: "关闭其他所有页",
                              handler: function() {
                                  tdemo.items.each(function(item) {
                                      if (item.closable && item != myitem) {
                                          tdemo.remove(item);
                                      }
                                  });
                              }
                          },
                          {
                              text: "新建标签页",
                              handler: addTab
                          }

                        ]);
                            menu.showAt(e.getPoint());


                            
                        }
                    }
                });
            });
    </script>
</head>
<body>
    <a href="javascript:void(0)" id="AddNewTab">添加新页面</a>
</body>
</html>

效果图：