Ext 窗体demo 

/*注意：自己导入extjs的包
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

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({
                el:'hello-win',
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,
                
                items: new Ext.TabPanel({
                    el: 'hello-tabs',
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:false
                }),

                buttons: [{
                    text:'Submit',
                    disabled:true
                },{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });
});

　　

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 5     <title>Hello World Window Example</title>
 6     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
 7 
 8     <!-- GC -->
 9      <!-- LIBS -->
10      <script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
11      <!-- ENDLIBS -->
12 
13     <script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
14 
15     <script language="javascript" src="hello.js"></script>
16 
17 <!-- Common Styles for the examples -->
18 <link rel="stylesheet" type="text/css" href="../examples.css" />
19 
20     <style type="text/css">
21     .x-panel-body p {
22         margin:10px;
23         font-size:12px;
24     }
25     </style>
26 </head>
27 <body>
28 <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
29 
30 <h1>Hello World Window</h1>
31 <p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
32 <input type="button" id="show-btn" value="Hello World" /><br /><br />
33 <p>Note that the js is not minified so it is readable. See <a href="hello.js">hellos.js</a> for the full source code.</p>
34 
35 <div id="hello-win" class="x-hidden">
36     <div class="x-window-header">Hello Dialog</div>
37     <div id="hello-tabs">
38         <!-- Auto create tab 1 -->
39         <div class="x-tab" title="Hello World 1">
40             <p>Hello...</p>
41         </div>
42         <!-- Auto create tab 2 -->
43         <div class="x-tab" title="Hello World 2">
44             <p>... World!</p>
45         </div>
46     </div>
47 </div>
48 </body>
49 </html>

 

posted @ 2013-03-22 11:29  歌颂者  阅读(1288)  评论(0)    收藏  举报