extjs4 tab 样式修改

默认的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: "首页"

             }] 

   });