Ext简单demo示例

转载于 2017-04-05 22:45:00 发布 · 523 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cykj/p/Ext-simple-demo-example.html

文章标签：

 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     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: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>