`

EXT 将tabpanel 加到window中

阅读更多

<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>

分享到:
评论

相关推荐

    Ext 3.0 中文文档

    2. **组件系统**:详述Ext的各种组件,如Grid面板、Form表单、Window窗口、TabPanel选项卡、Toolbar工具栏等,以及如何创建和配置这些组件。 3. **数据绑定**:讲解Ext的数据模型(Model)、数据存储(Store)和...

    Ext组件说明 Ext组件概述

    总之,Ext框架的组件库为开发者提供了极其丰富的工具,涵盖了从基础UI元素到复杂数据处理的各种需求。熟练掌握这些组件的使用,将大大提升开发效率和应用质量。对于初学者来说,逐步学习并实践每个组件的特性和用法...

    EXT和JAVA例子

    EXT JS提供了丰富的UI组件,如GridPanel(表格),FormPanel(表单),Window(弹出窗口),TabPanel(选项卡)等,这些都是构建用户界面的基础。开发者可以通过配置对象定义组件的属性,如大小、颜色、样式等,并...

    EXT2.0中文教程

    4.6.1. ext中默认的提交形式 4.6.2. 使用html原始的提交形式 4.6.3. 单纯ajax 4.7. 验证苦旅 4.7.1. 不能为空 4.7.2. 最大长度,最小长度 4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField ...

    Ext中xtype和vtype.

    在本文中,我们将对 Ext 中的 xtype 进行详细的介绍。 vtype 则是 Ext 中的一种验证规则,它定义了组件的输入规则。例如,email vtype 用于验证输入的电子邮件地址是否正确。Ext 提供了许多内置的 vtype,例如 ...

    Ext3.0的个人笔记及例子

    9. **ViewPort(视口)**:在Ext3.0中,ViewPort是整个浏览器窗口的容器,它将应用程序的主要内容填充到浏览器的可视区域。通常,整个应用程序的布局会被设置为ViewPort,以便自适应屏幕大小。 以上是Ext3.0中涉及...

    Ext组件描述,各个组件含义

    **2.14 Window (Ext.Window)** - **xtype**: `window` - **功能描述**:Window 是一个可以移动、关闭和调整大小的对话框。 - **主要用途**:用于显示弹出窗口、模态对话框等。 **2.15 Toolbar (Ext.Toolbar)** - ...

    Ext 开发指南 学习资料

    Ext.Window中的closeAction A.13. 使用同步ajax B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 C.4. ext开发计划 D. ...

    ext.net 动态创建gridpanel

    总的来说,`newtpanel.aspx` 和 `newtpanel.aspx.cs` 文件展示了如何利用Ext.NET在服务器端和客户端代码中动态创建和管理GridPanel,以及如何将它们集成到各种窗口容器中,以实现灵活的数据展示和交互。这是一项关键...

    ext designer 设计实例

    在这个“EXT Designer 设计实例”中,我们将深入探讨如何利用EXT Designer来构建各种组件,包括Form、Window、Grid、ListView、Panel、DataView以及Tabs。 1. **Form**: Form组件是EXT JS中用于收集用户输入数据...

    ext_ext_knew7pi_ajax_

    在`knew7pi`这个标签中,可能是指某个个人或团队对EXT 1.1的深入理解和实践,他们分享了一些关于EXT AJAX的实例,包括如何使用EXT组件(如GridPanel、Menu和Window)与服务器进行AJAX交互,实现动态内容展示和用户...

    EXT 中文帮助手册

    13 适配器Adapters 13 核心Core 13 Javascript中的作用域(scope) 13 事前准备 13 定义 13 正式开始 14 window对象 14 理解作用域 15 变量的可见度 15 EXT程序规划入门 16 事前...

    EXT简体中文参考手册(PDF&CHM电子档)

    第二步,将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式化功能 63 正式开始 63 下一步 64 事件处理 64 非常基础的例子 64 处理函数的作用域 64 传递参数 65 类设计 66 对象创建 66 使用构造器...

    EXT例子,可以直接跑

    1. EXT组件:EXT提供了丰富的组件库,例如`GridPanel`用于数据展示,`FormPanel`用于数据输入,`TabPanel`实现多标签页,`Window`用于弹出对话框,`Toolbar`提供操作按钮,`TreePanel`展示层次结构数据,以及各种小...

    深入浅出Ext 光盘源码

    1. **组件化设计**:EXT将界面元素抽象为各种组件(Component),如GridPanel、Window、TabPanel等。每个组件都有自己的生命周期、属性、方法和事件,可以独立地创建、配置、显示和销毁。 2. **数据绑定**:EXT的...

    EXT 中文手册

    13 适配器Adapters 13 核心Core 13 Javascript中的作用域(scope) 13 事前准备 13 定义 13 正式开始 14 window对象 14 理解作用域 15 变量的可见度 15 EXT程序规划入门 16 事前...

    ext-3.1.1源码

    EXTJS 3.1.1中包含的组件有:GridPanel(表格)、FormPanel(表单)、Window(窗口)、TabPanel(选项卡)、Toolbar(工具栏)等。 2. **布局管理**: EXTJS 3.1.1提供多种布局模式,如Fit布局、Border布局、Form...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    [InstanceOf("Ext.Window")] Example (New) public override string InstanceOf { get { return "Ext.Window"; } } 39. Removed [Layout] Attribute and replaced with new .LayoutType ...

    EXT_JS实用开发指南_个人整理笔记

    - **表单及元素组件**:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel和Window等。 6. **组件的使用**: 创建组件时,需要指定其配置参数,如尺寸...

Global site tag (gtag.js) - Google Analytics