首页 > 代码库 > Ext简单demo示例

Ext简单demo示例

2024-09-12 18:36:12   206人阅读

 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 渲染成tabs13     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‘:conrirmTab22             }23     },{24         title: ‘Tab 2‘,25         html: ‘Another one‘,26         closable: true,27         listeners: {28                 ‘beforeclose‘:conrirmTab29             }30     }]31     });32     33     var win = new Ext.Window({34     title:‘Ext简单demo示例‘,35     el:‘content‘,//将此div 创建成窗体对象36     layout:‘fit‘,//布局37     width: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:tabs52     });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>

 

Ext简单demo示例


联系
我们