Extjs4---tab选项卡-操作选项卡，增删插入

1. Ext.require(  
2.         'Ext.tab.*'  
3. );  
4. Ext.onReady(  
5.           
6.         function(){  
7.             //添加一个Tab，在最后面添加  
8.             Ext.create(  
9.                     'Ext.Button',  
10.                     {  
11.                         text:'添加一个Tab',  
12.                         renderTo:Ext.getBody(),  
13.                         handler:function(){  
14.                             tabs.add(  
15.                                     {  
16.                                         title:'新添加的tab',  
17.                                         html:'这个tab是通过add添加的',  
18.                                         closable:true  
19.                                     }  
20.                             );  
21.                         }  
22.                     }  
23.             );  
24.             //插入一个tab,可以指定插入的位置  
25.             Ext.create(  
26.                     'Ext.Button',  
27.                     {  
28.                         text:'插入一个Tab',  
29.                         renderTo:Ext.getBody(),  
30.                         handler:function(){  
31.                             tabs.add(3, //第一个参数是用来指定插入的位置  
32.                                     {  
33.                                         title:'新插入的tab',  
34.                                         html:'这个tab是通过insert插入来的',  
35.                                         closable:true  
36.                                     }  
37.                             );  
38.                         }  
39.                     }  
40.             );  
41.             //删除tab---指定删除的位置  
42.             Ext.create(  
43.                     'Ext.Button',  
44.                     {  
45.                         text:'根据位置删除tab',  
46.                         renderTo:Ext.getBody(),  
47.                         handler:function(){  
48.                             //删除第四位置上的tab  
49.                             tabs.remove(4);  
50.                         }  
51.                     }  
52.             );  
53.             //删除tab---删除指定id的tab  
54.             Ext.create(  
55.                     'Ext.Button',  
56.                     {  
57.                         text:'根据id删除tab',  
58.                         renderTo:Ext.getBody(),  
59.                         handler:function(){  
60.                             //删除id为tab3的tab  
61.                             tabs.remove('tab3');  
62.                         }  
63.                     }  
64.             );  
65.             //设置活动窗口：  
66.             Ext.create(  
67.                     'Ext.Button',  
68.                     {  
69.                         text:'设置活动窗口',  
70.                         renderTo:Ext.getBody(),  
71.                         handler:function(){  
72.                             //设置2为活动窗口  
73.                             tabs.setActiveTab(2);  
74.                         }  
75.                     }  
76.             );  
77.               
78.               
79.             var tabs = Ext.create(  
80.                     'Ext.tab.Panel',  
81.                     {  
82.                         renderTo:Ext.getBody(),  
83.                         activeTab:0,  
84.                         width:600,  
85.                         height:300,  
86.                         plain:true,  
87.                         defaults:{  
88.                             autoScoll:true  
89.                         },  
90.                         items:[  
91.                                {  
92.                                    id:'tab1',  
93.                                    title:'Tabs-1',  
94.                                    html:'这是一个普通的tab'  
95.                                },{  
96.                                    id:'tab2',  
97.                                    title:'tab-2',  
98.                                    contentEl:'tab2'  
99.                                },{  
100.                                    id:'tab3',  
101.                                    title:'ajax Tab',  
102.                                    autoLoad:{  
103.                                        url:'tabAction',  
104.                                        params:{  
105.                                            data:'从客户端传入的参数'  
106.                                        },  
107.                                        method:'GET'  
108.                                    }  
109.                                  
110.                                },{  
111.                                    id:'4',  
112.                                    title:'事件tab',  
113.                                    listeners:{  
114.                                        activate:function(tab){  
115.                                            alert(tab.title + ': activate事件触发。');  
116.                                        }  
117.                                    },  
118.                                    html:'带事件的tab',  
119.                                    autoLoad:false  
120.                                },{  
121.                                    id:'tab5',  
122.                                    title:'不可用的tab',  
123.                                    disabled: true  
124.                                }  
125.                         ]  
126.                     }  
127.             );  
128.         }  
129. );  

其他代码参考上一篇文章

 

效果图：