/*注意:自己导入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>