ExtJs4 笔记 ExttabPanel 选项卡文档格式.docx
《ExtJs4 笔记 ExttabPanel 选项卡文档格式.docx》由会员分享，可在线阅读，更多相关《ExtJs4 笔记 ExttabPanel 选项卡文档格式.docx（15页珍藏版）》请在冰豆网上搜索。
id="
tabPanel"
style="
display:
none"
oneTab"
p>
这个tab所展示的内容是读取至其他HTML标签<
/p>
/div>
[Js]
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//1.基本的选项卡
var
tabs1=Ext.createWidget（'
tabpanel'
{
renderTo:
"
activeTab:
1,
//指定默认的活动tab
width:
600,
120,
plain:
true,
//True表示tab候选栏上没有背景图片（默认为false）
enableTabScroll:
//选项卡过多时，允许滚动
defaults:
{autoScroll:
true
},
items:
[{
id:
tab1"
title:
'
普通Tab'
html:
这只是一个非常普通的Tab。
[{xtype:
button'
text:
按钮'
}],
closable:
//这个tab可以被关闭
},{
tab2"
内容来至div'
contentEl:
oneTab'
//指定了当前tab正文部分从哪个html元素读取
tab3"
AjaxTab'
autoLoad:
{url:
AjaxTabContent'
params:
{data:
从客户端传入的参数"
},method:
GET'
}
tab4"
事件Tab'
listeners:
{activate:
handleActivate},
带事件的Tab。
tab5"
不可用Tab'
disabled:
true,
不可用的Tab，你是看不到我的。
}]
}）;
//单击tab4后触发的事件
function
handleActivate（tab）{
alert（tab.title+
:
activated事件触发。
）;
我们查看一下生成的选项卡效果：
二、操作选项卡
选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：
操作选项卡<
id="
content2"
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
index=0;
//新增一个Tab
Ext.createWidget（"
button"
text:
新增一个Tab"
content2'
handler:
（）{
tabs1.add（{
新Tab'
+（++index）,
newTab"
+index,
选项卡文本部分'
+（index）+
br/>
true
//插入一个Tab
在2号位置插入新Tab"
tabs1.insert（2,{
//删除一个Tab
删除2号位置的Tab"
tabs1.remove
（2）;
//删除id为“tab1”的Tab
删除id为“tab1”的Tab"
tabs1.remove（"
设置第三个Tab为活动tab"
tabs1.setActiveTab
（2）;
效果：
三、选项卡按钮在下方
默认的选项卡按钮在上方，我们可以随意定义选项卡按钮的位置，下面代码演示了具体的用法：
选项卡按钮在下方<
content3"
//选项卡按钮在下方
tabs3=Ext.createWidget（'
0,
150,
tabPosition:
bottom'
//指定了选项卡的位置，left,right
for
（var
i=0;
i<
3;
i++）
tabs3.add（{
Tab'
+i,
Tabs3_"
四、可拖动的选项卡
通过官方扩展包我们可以增强选项卡控件的易用性，比如现在我们可以实现一个可以拖动选项卡按钮的功能：
可拖动的选项卡<
content4"
//首先要动态加载ux扩展的js
Ext.Loader.setConfig（{enabled:
true}）;
Ext.Loader.setPath（'
Ext.ux'
/ExtJs/ux'
Ext.require（[
Ext.tip.QuickTipManager'
Ext.tab.Panel'
Ext.ux.TabScrollerMenu'
Ext.ux.TabReorderer'
Ext.ux.TabCloseMenu'
Ext.ux.GroupTabPanel'
]）;
//以下是功能代码
//可拖动的选项卡
tabs4=Ext.createWidget（'
plugins:
Ext.create（'
）,
xtype:
panel'
tab不可拖'
这个选项卡不可被拖动"
reorderable:
false,
tabs4.add（{
Tabs4_"
效果如下，可见一个tab已经被移动：
五、过多选项卡的菜单式展示
如果面板上的选项卡打开的过多而显示不下，那么需要对溢出的选项卡用菜单的方式展示出来，实现方式如下，注意要引入扩展的css样式：
过多选项卡的菜单式展示<
content5"
//选项卡过多溢出时菜单显示
tabs5=Ext.createWidget（'
maxText:
15,
pageSize:
5
}）,
tab0'
第一个tab'
Ext.defer（function
myTabs=[];
15;
i++）{
myTabs.push（{
Tabs5_"
tabs5.add（myTabs）;
},1000）;
六、选项卡的右键菜单
一般的应用程序都支持在选项卡按钮上面通过右键的方式去关闭多余的选项卡，在ext中也可以做到，实现方法如下：
选项卡的右键菜单<
content6"
//选项卡的右键菜单
currentItem;
tabs6=Ext.createWidget（'
closeTabText:
关闭当前'
closeOthersTabsText:
关闭其他'
closeAllTabsText:
关闭所有'
extraItemsTail:
[
-'
{
可关闭'
checked:
hideOnClick:
（item）{
currentItem.tab.setClosable（item.checked）;
],
{
aftermenu:
currentItem=
null;
beforemenu:
（menu,item）{
menuitem=menu.child（'
*[text="
可关闭"
]'
currentItem=item;
menuitem.setChecked（item.closable）;
tab1'
tab2'
第二个tab'
tab3'
第三个tab'
七、分组式选项卡
我们还可以对选项卡进行分组，具体实现如下：
分组式选项卡<
content7"
//分组式选项卡
tabs7=Ext.create（'
activeGroup:
0,
//设置当前活动的分组
expanded:
mainItem:
//设置主要的item，这个tab会在最上面，以文件夹方式展示出来。
项目1'
b>
第一组第一项正文。
/b>
项目2'
border:
第一组第二项正文。
项目3'
第一组第三项正文。
第二组第一项正文。
第二组第二项正文。
Ext.create（'
Ext.Panel'
250,
collapsible:
layout:
fit'
分组tab演示'
tabs7
升级会员 