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

以下就是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</p>
        </div>
        
        <div class="x-tab" title="Hello World 2">
            <p> World!</p>
        </div>
    </div>
</div>

</body>
</html>

posted @ 2008-09-01 12:28  菩提树下的杨过  阅读(5225)  评论(0)  编辑  收藏  举报