extjs4 tab 样式修改

原文：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: "首页"             }]    });