Ext js 4.0.2a：タブの色を変更する

Question

アクションの1つのタブの色を変更する必要があります。 だから私はこれを行う

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; 
} 

しかし、機能しません。 ここで何が間違っていますか？誰かがこれを行う方法を提案することができます。 1つのタブの色のみを変更する必要があります。

Answer 1

ここではいくつか間違いがあります。

1. あなたはすべてのクラス名を一掃し、「TV-X-タブ」に置き換える代わりに、あなたのCSSはまだ "に依存するので、やりたいように見えるものです、そのクラス名を、追加していますx-tab-default-top "がそこにあります。

   ので

   他のものを削除せずに、クラス名を追加します

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

   に

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

   を変更、activeTabは、あなたの現在のアクティブなタブへの参照であると仮定。

2. CSSセレクタが適切な構文ではありません。 "x-tab-default-top"が "tv-x-tab"の子であるかのように記述しましたが、実際は同じ要素なので、セレクタ間のスペースを削除する必要があります。

   変更

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

   あなたを設定する必要があり

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

   へ。