分机js 4.0.2a：更改标签颜色

Question

我需要更改操作上单个标签的颜色。 所以我这样做

activeTab.tab.el.dom.className = 'tv-x-tab'; 

并添加CSS样式。

/* line 58, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-tab-default-top { 
-moz-border-radius-topleft: 4px; 
-webkit-border-top-left-radius: 4px; 
-o-border-top-left-radius: 4px; 
-ms-border-top-left-radius: 4px; 
-khtml-border-top-left-radius: 4px; 
border-top-left-radius: 4px; 
-moz-border-radius-topright: 4px; 
-webkit-border-top-right-radius: 4px; 
-o-border-top-right-radius: 4px; 
-ms-border-top-right-radius: 4px; 
-khtml-border-top-right-radius: 4px; 
border-top-right-radius: 4px; 
-moz-border-radius-bottomright: 0; 
-webkit-border-bottom-right-radius: 0; 
-o-border-bottom-right-radius: 0; 
-ms-border-bottom-right-radius: 0; 
-khtml-border-bottom-right-radius: 0; 
border-bottom-right-radius: 0; 
-moz-border-radius-bottomleft: 0; 
-webkit-border-bottom-left-radius: 0; 
-o-border-bottom-left-radius: 0; 
-ms-border-bottom-left-radius: 0; 
-khtml-border-bottom-left-radius: 0; 
border-bottom-left-radius: 0; 
padding: 3px 3px 0 3px; 
border-width: 1px 1px 0 1px; 
border-style: solid; 
background-image: none; 
background-color: white; 

} 

/* line 91, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
    .tv-x-tab .x-nlg .x-tab-default-top-mc { 
    background-image: url('/themes/images/default/tab/tab-pnl-top-bg.gif'); 
    background-color: white; 
} 

/* line 104, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top { 
    padding: 0 !important; 
    border-width: 0 !important; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px; 
-o-border-radius: 0px; 
-ms-border-radius: 0px; 
-khtml-border-radius: 0px; 
border-radius: 0px; 
background-color: transparent; 
background-position: 1100404px 1000000px; 
} 

/* line 147, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top-tl, 
.tv-x-tab .x-nbr .x-tab-default-top-bl, 
.tv-x-tab .x-nbr .x-tab-default-top-tr, 
.tv-x-tab .x-nbr .x-tab-default-top-br, 
.tv-x-tab .x-nbr .x-tab-default-top-tc, 
.tv-x-tab .x-nbr .x-tab-default-top-bc, 
.tv-x-tab .x-nbr .x-tab-default-top-ml, 
.tv-x-tab .x-nbr .x-tab-default-top-mr { 
    zoom: 1; 
    background-image: url('/themes/images/default/tab/tab-pnl-top-corners.gif'); 
} 
/* line 168, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top-ml, 
.tv-x-tab .x-nbr .x-tab-default-top-mr { 
zoom: 1; 
background-image: url(/themes/images/default/tab/tab-pnl-top-sides.gif'); 
    background-position: 0 0; 
} 

/* line 200, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top-mc { 
    padding: 0 0 0 0; 
} 

但它不工作。 我在这里做错了什么？有人可以建议如何做到这一点。 我必须改变一个标签的颜色。

Answer 1

你在这里犯了一些错误。

1. 你消灭所有的类名，并与“TV-X标签”取代它们，而不是加入这个类的名字，这是你似乎什么想做的事，因为你的CSS仍取决于“ x-tab-default-top“在那里。

   因此，假设activeTab是您当前的活动标签参考，更改

   activeTab.tab.el.dom.className = 'tv-x-tab';

   到

   activeTab.tab.el.addCls('tv-x-tab');

   这将添加类名而不删除其他的。

2. 您的CSS选择器是不正确的语法。你已经写过，就好像“x-tab-default-top”是“tv-x-tab”的孩子，但它们实际上是相同的元素，所以你需要删除选择器之间的空间。

   变化

   .tv-x-tab .x-tab-default-top { 
   

   到

   .tv-x-tab.x-tab-default-top { 
   

   这应该设置你。