Ext.tabPanel 独孤九剑-第一式-优快云博客

本文介绍如何使用ExtJS创建可拖动面板及选项卡面板，并展示了如何配置面板属性如折叠、自动滚动等，同时实现了选项卡面板的延迟加载。

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

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
            function myPanel()
            {
                var panel = new Ext.Panel(
                            {
                                id: 'myPanel_1',        //通过id可以找到这个组件
                                 title: 'My Panel',      //标题
                                 collapsible: true,      //右上角上的那个收缩按钮，设为false则不显示
                                 renderTo: 'hello',      //这个panel显示在html中id为container的层中
                                 draggable:true,         //是否可以拖动
                                 titleCollapse: true,    //是否点击标题栏的任何地方都能收缩
                                 autoScroll:true,        //设为true则内容溢出的时候产生滚动条，默认为false
                                 width:400,
                                 height:200,
                                 html: "<p>我是内容，我包含的html可以被执行！</p>"//panel主体中的内容，可以执行html代码
                             });
             }
             //实现的延迟加载
             function myTabPanel_A()
             {
                 var panel=new Ext.TabPanel(
                         {width:300,height:200,items:[
                                                         {
                                                             contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
                                                             title:"HuyVanpull's Panel",
                                                              activeTab:1, //当前激活标签
                                                              height:30,
                                                              closable:true
                                                         },
                                                         {
                                                             contentEl:"tabTwo",//标签页的页面元素id(加入你想显示的话)
                                                             title:"Hui Wanpeng's Panel",
                                                              height:30,
                                                              closable:true
                                                         }
                                                     ]});
                 panel.render("container");
             }
             function myTabPanel_B()
             {
                 var panel=new Ext.TabPanel(
                         {width:300,height:200,items:[
                                                         {
                                                             contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
                                                             title:"HuyVanpull's Panel",
                                                              activeTab:1, //当前激活标签
                                                              height:30,
                                                              closable:true
                                                         },
                                                         {
                                                             contentEl:"tabTwo",//标签页的页面元素id(加入你想显示的话)
                                                             title:"Hui Wanpeng's Panel",
                                                              height:30,
                                                              closable:true
                                                         }
                                                     ]});
                 panel.render("container");
             }
             Ext.onReady(myTabPanel_A);
        </script>
    </head>
    <body>
        <div id="container"></div>
        <div id="tabOne" class="x-hide-display">
            i am Huyvanpull!
        </div>
        <div id="tabTwo" class="x-hide-display">
            i am Hui Wanpeng!
        </div>
    </body>
</html>