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