2010.04.12———Ext 之 window_window

最新推荐文章于 2025-02-27 09:38:41 发布

原创最新推荐文章于 2025-02-27 09:38:41 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #框架 #HTML

本文介绍了一个使用ExtJS框架实现的窗口与标签页示例，展示了如何通过JavaScript创建可复用的窗口组件，并利用自定义的HTML结构自动构建标签页。此示例覆盖了窗口的基本配置、布局管理及事件监听。

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

2010.04.12———Ext 之 window_window

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>window例子</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <!-- ext-base.js必须在ext-all前面，不然，Ext无法识别 -->
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
    var win;
    var button = Ext.get('show-btn');

    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                applyTo:'hello-win',
                /*可以把一个已存在的div元素装备到panel中去，并且一些特定的元素
               	 会被特定的clss形式所渲染，如：baseCls + '-header' 
				baseCls + '-header-text' 
				baseCls + '-bwrap' 
				baseCls + '-tbar' 
				baseCls + '-body' 
				baseCls + '-bbar' 
				baseCls + '-footer' 
                window的baseCls是"x-window",
			              如果指定了applyTo配置项，任何传递给renderTo配置项的值都会被忽略，
			              并且目标元素的父节点自动被作为panel的容器来使用。 
			              下面html中的"x-hidden"主要用于隐藏
                */
                layout:'fit',//布局样式，这是一个基本布局类，包含一个单一的项目，自动扩大，以适应布局的容器
                width:500,
                height:300,
                closeAction:'hide',
                /*
				 当右上角关闭按钮被点击时执行的操作。 默认的操作是'close'，这将把窗口从DOM中移除并摧毁它；
				 另一个合法的选项是'hide'，这将简单地隐藏窗口。 通过 show 方法可以让窗口重新显示。
                */
                plain: true,
                /*
                                                      设置为true将把窗体的body区域用一个透明背景来渲染， 这样它将被融合进框架元素； 
                false 将添加一个更亮的背景色， 在视觉上高亮显示body元素
                */

                items: new Ext.TabPanel({
                    applyTo: 'hello-tabs',
                    autoTabs:true,
                    /*
                                                                    设置为true将自动查询DOM树，样式为'x-tab'的div将自动转换成 标签页，并添加到面板中
                                                                    只有标签结构正确，可以作为一个容器，并且包含嵌套的，样式类型为'x-tab' 的div时，此方法才有效
                    1.必须使用 applyTo 以便正确地使用指定的id，与标签页容器相同
                    2.确保你将 deferredRender 设置成了false，以便每个标签页的内容元素在页面加载时渲染进TabPanel， 否则它们不会被转换
                    */
                    activeTab:0,
                    deferredRender:false,//延迟读取
                    border:false
                }),

                buttons: [{
                    text:'Submit',
                    disabled:true
                },{
                    text: 'Close',
                    handler: function(){
                        win.hide();//当按钮被点击时，隐藏窗口
                    }
                }]
            });
        }
        win.show(this);//如果win已经创建了，就直接展示
    });
});


</script>
</head>

<body>
<input type="button" id="show-btn" value="Hello World" /><br /><br />

<div id="hello-win" class="x-hidden">

    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Hello World 1">
            <p>Hello...</p>
        </div>
        <!-- Auto create tab 2 -->
        <div class="x-tab" title="Hello World 2">
            <p>... World!</p>
        </div>
    </div>
</div>
</body>
</html>