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

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. );??

其他代码参考上一篇文章

?

效果图：