Ext 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 { 
   

   합니다.