Extjs4中两种定义tabPanel的方式

转载

mob604756f0266e 2013-05-14 16:46:00

文章标签 Extjs学习 html 选项卡获取数据 ajax 文章分类 代码人生

extjs组件比较多,看一点学习一点,天天进步中...嘿嘿。

不想说太多,直接上代码了:

1 //两种创建tabpanel
 2 Ext.require('Ext.tab.*');
 3 Ext.onReady(function(){
 4         
 5     //第一种方式创建
 6     var tabs1=Ext.createWidget('tabpanel',{
 7         width:450,
 8         activeTab:0,
 9         margin:'50 10 50 80',
10         defaults:{
11             bodyPadding:10    
12         },
13         items:[{
14             title:'tabl 1',
15             closable:true,
16             html:'tal的内容'    
17             
18         },{
19             title:'tabl 2',
20             closable:false,
21             html:'tab1 2的内容'
22             
23             }],
24             renderTo:Ext.getBody()
25     });
26     
27     //第二种方法创建
28     var tabls2=Ext.create('Ext.tab.Panel',{
29         width:600,
30         height:300,
31         activeTab:0,
32         plain:true,//使tab的表头突出
33         margin:'0 10 0 80',
34         defaults:{
35             autoScroll:true,
36             bodyPadding:10    
37         },
38         items:[{
39                 title:'tab 1',
40                 html:'very good'
41             },{
42                 title:'tab 2',
43                 html:'very very good'
44             },{
45                 title:'异步获取数据',
46                 loader:{
47                     url: 'ajax.htm',
48                     contentType:'html',
49                     loadMask:true    
50                 },
51                 listeners:{
52                     activete:function(tab){
53                         tab.loader.load
54                     }    
55                 }
56                 }],
57             renderTo:Ext.getBody()    
58         
59     });
60     
61 });

效果: Extjs4中两种定义tabPanel的方式_选项卡

在Ext中tabPanel与tab可以分开,这样就更灵活多变了.请看下面的例子:

　　代码:

1 Ext.require('Ext.tab.*');
 2 Ext.onReady(function(){
 3             var currentItem;
 4             var tabs=Ext.create('Ext.tab.Panel',{
 5                 width:600,
 6                 height:250,
 7                 magin:'10',
 8                 resizeTabs:true,
 9                 enableTabScroll:true,
10                 defaults:{
11                     autoScroll:true,
12                     bodyPadding:10    
13                 },
14                 items:[{
15                         title:'选项卡',
16                         html:'选项卡的内容',
17                         closable:true
18                 }],
19                 renderTo:'tab'
20                 
21             });
22         var index=0;
23         function addTab(closable){
24             ++index;
25             tabs.add({
26                 title:'新选项卡'+index,
27                 html:'新选项卡内容'+index+'<br/><br/>',
28                 closable:!!closable    
29                 
30             }).show();
31             
32         }
33         
34         Ext.createWidget('button',{
35             renderTo:'add',
36             text:'创建可关闭的选项卡',
37             handler:function(){
38                 
39                 addTab(true);    
40             }
41             
42         });
43         
44         Ext.createWidget('button',{
45             renderTo:'add',
46             text:'创建不可关闭的选项卡',    
47             handler:function(){
48                 addTab(false);            
49             },
50             style:'margin-left:8px'
51         });
52     
53 });