ExtJs学习笔记(9)_Window的基本用法

最新推荐文章于 2020-05-21 00:01:54 发布

转载最新推荐文章于 2020-05-21 00:01:54 发布 · 98 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个使用 ExtJS 创建弹出窗口及内部包含标签页导航的示例。通过 HTML 和 JavaScript 实现了窗口的显示与隐藏、标签页的自动创建等功能，并详细展示了相关代码配置。

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

以下就是ExtJs的官方示例，只不过加了几行注释，呵

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello World Window Example</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body>
<script type="text/javascript">
    Ext.onReady(function() {
        var win;
        var button = Ext.get('show-btn');

        button.on('click', function() {
            if (!win) {
                win = new Ext.Window({
                    applyTo: 'Container',
                    layout: 'fit', //fit布局会使容器内的组件自动充满容器(Resize容器时，自动重绘)
                    //title:"new Title",//不加这一句时，会自动寻找Container中样式为x-window-header的div，将其内容做为window的title
                    width: 500,
                    height: 300,
                    closeAction: 'hide',//关闭后，仅隐藏，方便下次再显示
                    plain: true,
                    items: new Ext.TabPanel({
                        applyTo: 'hello-tabs',
                        autoTabs: true, //加上这个后，会在hello-tabs里自动寻找样式为x-tab的div，根据title标识创建tab，根据div内容创建tab内容
                        activeTab: 0,
                        deferredRender: false,
                        border: false
                    }),

                    buttons: [{
                        text: 'Submit',
                        disabled: true
                    }, {
                        text: 'Close',
                        handler: function() {
                            win.hide();
                        }
}]
                    });
                }
                win.show(button);//注意win.show()与win.show(button)的区别，show(button)会使弹出窗口看起来象从button上弹出来的，具有动画效果，而win.show()则没有这一动画效果
            });
        });
</script>

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

<div id="Container" class="x-hidden">
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">

        <div class="x-tab" title="Hello World 1">
            <p>Hello