默认的extjs tab给人感觉不够大气,修改了哈样式表
tab-bar.css:
/* CSS Document */ .ui-tab-bar{ padding-top:1px; } .ui-tab-bar .x-tab-bar{ background:#FFF !important; border:0 !important; } .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: "首页"
}]
});