Ext.Window 独孤九剑-第二式-优快云博客

本文介绍了一个使用 Ext.Window 和 TabPanel 的示例，展示了如何创建包含标签页的弹出窗口，并设置了窗口的基本属性，如按钮、标题等。

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

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ext.Window</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 myWindow()
             {
                 var tabPanel=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
                                    }

                                  ]
                         });
                //window组件，它继承自pane.
                var win=new Ext.Window(
                        {
                               contentEl:"container",
                               width:300,
                               height:200,
                               items:tabPanel,
                               plain:true,//true则主体背景透明，false则主体有小差别的背景色，默认为false
                               title:"My Window",
                               buttons:[{text:"OK"},{text:"CANCEL",handler:function(){win.close();}}],
                               buttonAlign:"center",
                               collapsible:true
                        });
                win.show();
             }
             Ext.onReady(myWindow);
        </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>