Ext简单示例

讓丄帝愛伱

于 2021-05-15 15:00:00 发布

阅读量73

点赞数

文章标签： js javascript html html5 css

本文链接：https://blog.csdn.net/ximaiyao1984/article/details/120286260

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Ext简单demo示例</title>
     <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">  
     <script type="text/javascript"  src="ExtJS/adapter/ext/ext-base.js" ></script>  
     <script type="text/javascript"  src="ExtJS/ext-all.js" ></script>
     <script>
     Ext.onReady(function(){
     var tabs = new Ext.TabPanel({
     //applyTo: 'tabs', //这里将把我们自己创建的id 为tabs 的div 渲染成tabs
     activeTab: 0,
     deferredRender: false,
     autoTabs: true,
     items: [{
         title: 'Tab 1',
         html: 'A simple tab',
         closable: true,
          listeners: {
                 'beforeclose':conrirmTab
             }
     },{
         title: 'Tab 2',
         html: 'Another one',
         closable: true,
         listeners: {
                 'beforeclose':conrirmTab
             }
     }]
     });
     
     var win = new Ext.Window({
     title:'Ext简单demo示例',
     el:'content',//将此div 创建成窗体对象
     layout:'fit',//布局
     width:500,
     height:300,
     closeAction:'hide',//设置是否可以关闭
     plain: true,
     draggable:false,
     maximizable:true,
     minimizable:true,
     modal:false,
     onEsc:function aa(){
         Ext.Msg.alert('aaa');
     },
     resizable:false,
     collapsible:true,
     plain:true,
     items:tabs
     });
     function conrirmTab(e){
         Ext.Msg.confirm('操作确认','操作确认',
             function(btn,text){
                 if(btn=='yes'){
                 tabs.remove(e);
             }
             });
         return false;
     }
     win.show(Ext.getBody());//在body 中渲染此窗体
     });
     </script>
 </head>
 <body>
 <div id="content">
 </div>
 </body>
 </html>