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=UTF-8"> 5 <title>Ext简单demo示例</title> 6 <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css"> 7 <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script> 8 <script type="text/javascript" src="ExtJS/ext-all.js" ></script> 9 <script> 10 Ext.onReady(function(){ 11 var tabs = new Ext.TabPanel({ 12 //applyTo: 'tabs', //这里将把我们自己创建的id 为tabs 的div 渲染成tabs 13 activeTab: 0, 14 deferredRender: false, 15 autoTabs: true, 16 items: [{ 17 title: 'Tab 1', 18 html: 'A simple tab', 19 closable: true, 20 listeners: { 21 'beforeclose':conrirmTab 22 } 23 },{ 24 title: 'Tab 2', 25 html: 'Another one', 26 closable: true, 27 listeners: { 28 'beforeclose':conrirmTab 29 } 30 }] 31 }); 32 33 var win = new Ext.Window({ 34 title:'Ext简单demo示例', 35 el:'content',//将此div 创建成窗体对象 36 layout:'fit',//布局 37 500, 38 height:300, 39 closeAction:'hide',//设置是否可以关闭 40 plain: true, 41 draggable:false, 42 maximizable:true, 43 minimizable:true, 44 modal:false, 45 onEsc:function aa(){ 46 Ext.Msg.alert('aaa'); 47 }, 48 resizable:false, 49 collapsible:true, 50 plain:true, 51 items:tabs 52 }); 53 function conrirmTab(e){ 54 Ext.Msg.confirm('操作确认','操作确认', 55 function(btn,text){ 56 if(btn=='yes'){ 57 tabs.remove(e); 58 } 59 }); 60 return false; 61 } 62 win.show(Ext.getBody());//在body 中渲染此窗体 63 }); 64 </script> 65 </head> 66 <body> 67 <div id="content"> 68 </div> 69 </body> 70 </html>