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>