原文:http://cjblog.iteye.com/blog/1879921
说明:原文给的样式,把Tab标签右边空白改成白色了,我觉得不爽,做了下修改,保持原来的颜色不变,这样应对不同主题时,应该不会太影响其它效果,由于样式增加了tab的header高度,原来有个背景图就不能用了,下面的样式中我直接把该背景图取消了。看起还可以。
tab-bar.css:
CSS CODE:
/* CSS Document */
.ui-tab-bar
{
padding-top: 1px;
}
.ui-tab-bar .x-tab-bar
{
/*background: #FFF !important;*/
border: 0 !important;
}
/*去掉Tabs右边的线条图片*/
.ui-tab-bar .x-tab-bar-default-top{
background-image:none;
}
.ui-tab-bar .x-tab-bar-strip
{
top: 31px !important; /* Default value is 20*/
}
.ui-tab-bar .x-tab-bar-strip-default-top
{
height: 0px !important;
}
.ui-tab-bar .ui-tab-body
{
border: 0 !important;
}
.ui-tab-bar .x-tab-bar .x-tab-bar-body
{
height: 34px !important; /* Default value is 23*/
/*border: 0 !important;*/ /* Overides the border that appears on resizing the grid */
}
.ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner
{
height: 32px !important; /* Default value is 21*/
}
.ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab
{
height: 31px !important; /* Default value is 21*/
}
.ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab-button
{
height: 24px !important; /* Default value 13*/
line-height: 24px !important; /* Default value 13*/
margin-top: 5px;
}
引用方式:
var center = Ext.create("Ext.tab.Panel",{
region:"center",
id: 'center-panel',
defaults: {
autoScroll:true
},
cls:"ui-tab-bar",
bodyCls:"ui-tab-body",
activeTab: 0,
//plugins: [Ext.create('Ext.ux.TabCloseMenu')],
items: [{
id: "HomePage",
title: "首页"
}]
});