ExtJs学习笔记(8)_TabPanel的用法

raisun_1988 · 发表于 2013-2-7 15:17:17

ExtJs学习笔记(8)_TabPanel的用法

<div class="postBody">啥也不说了，直接上代码：
<div class="cnblogs_code"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../ext-all.js"></script>
<styletype="text/css">
*{font-size:12px;line-height:130%;}
.list{list-style:square;width:500px;padding-left:16px;}
.listli{padding:2px;font-size:8pt;}

pre{
font-size:11px;
}

.x-tab-panel-body.x-panel-body{
padding:10px;
}

/*defaultloadingindicatorforajaxcalls*/
.loading-indicator{
font-size:8pt;
background-image:url('../resources/images/default/grid/loading.gif');
background-repeat:no-repeat;
background-position:left;
padding-left:20px;
}

.new-tab{
background-image:url(../examples/feed-viewer/images/new_tab.gif)!important;
}

.tabs{
background-image:url(../examples/desktop/images/tabs.gif)!important;
}
</style>
<title>TabsDemo</title>
</head>
<body>
<scripttype="text/javascript">
Ext.onReady(function(){

vartabs=newExt.TabPanel({
renderTo:Ext.getBody(),
resizeTabs:true,//turnontabresizing
minTabWidth:115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:150,
defaults:{autoScroll:true},
plugins:newExt.ux.TabCloseMenu(),
tbar:[{text:'新建Tab',iconCls:'new-tab',handler:addTab}]

});

//tabgenerationcode
varindex=0;
while(index<2){
addTab();
}

functionaddTab(tab){
if(tabs.items.length>9){
Ext.MessageBox.alert("提示","最多只能新建10个tab!");
//tabs.tbar.setVisible(false);
returnfalse;
}
tabs.add({
title:'NewTab'+(++index),
iconCls:'tabs',
html:'TabBody'+(index),
closable:true
}).show();
}

});

//右键弹出菜单
Ext.ux.TabCloseMenu=function(){
vartabs,menu,ctxItem;
this.init=function(tp){
tabs=tp;
tabs.on('contextmenu',onContextMenu);
}

functiononContextMenu(ts,item,e){
if(!menu){//createcontextmenuonfirstrightclick
menu=newExt.menu.Menu([{
id:tabs.id+'-close',
text:'关闭当前',
handler:function(){tabs.remove(ctxItem);}
},{
id:tabs.id+'-close-others',
text:'关闭其它',
handler:function(){
tabs.items.each(function(item){
if(item.closable&&item!=ctxItem){
tabs.remove(item);
}
});
}
}]);
}
ctxItem=item;
varitems=menu.items;

items.get(tabs.id+'-close').setDisabled(!item.closable);

////只剩一个时，禁止关闭
//if(tabs.items.length==1){
//items.get(tabs.id+'-close').setDisabled(true);
//}

vardisableOthers=true;
tabs.items.each(function(){
if(this!=item&&this.closable){
disableOthers=false;
returnfalse;
}
});
items.get(tabs.id+'-close-others').setDisabled(disableOthers);
menu.showAt(e.getPoint());
}
};
</script>
</body>
</html>

		自动登录	找回密码
密码			立即注册