Ext简单demo示例
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-04-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读