Create a very simple modal Window with "autoTabs" from existing markup
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <!-- Revised from Ext JS Library 3.0.0 --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.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({ applyTo:'hello-win', layout:'fit', width:500, height:300, closeAction:'hide', plain: true, items: new Ext.TabPanel({ applyTo: 'hello-tabs', autoTabs:true, activeTab:0, deferredRender:false, border:false }), buttons: [{ text:'Submit', disabled:true },{ text: 'Close', handler: function(){ win.hide(); } }] }); } win.show(this); }); }); </script> </head> <body> <input type="button" id="show-btn" value="Hello World" /><br /><br /> <div id="hello-win" class="x-hidden"> <div class="x-window-header">Hello Dialog</div> <div id="hello-tabs"> <!-- Auto create tab 1 --> <div class="x-tab" title="Hello World 1"> <p>Hello...</p> </div> <!-- Auto create tab 2 --> <div class="x-tab" title="Hello World 2"> <p>... World!</p> </div> </div> </div> </body> </html>