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

你在这里犯了几个错误。

你正在消灭所有的类名并用“tv-x-tab”替换它们而不是添加那个类名，这是你似乎想要做的，因为你的CSS依赖于“x -tab-default-top“在那里。

因此，假设activeTab是对当前活动选项卡的引用，请更改

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

到

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

这将添加类名而不删除其他类名。
您的CSS选择器语法不正确。你已经把它写成“x-tab-default-top”是“tv-x-tab”的子节点，但它们实际上是相同的元素，所以你需要删除选择器之间的空格。

更改
```
.tv-x-tab .x-tab-default-top {
```
到
```
.tv-x-tab.x-tab-default-top {
```
那应该让你振作起来。

Ext js 4.0.2a：更改标签颜色

1 个答案: