Sencha Touch : 선택한 목록 스타일이 작동하지 않습니다.

Question

아마도 매우 간단한 질문 일 수 있지만, 어떤 이유로 인해 코드에서 문제를 찾을 수 없습니다. 나는 Sencha Touch 앱을 가지고있다.

xtype: 'list', 
store: 'Tenders', 
itemCls: 'tenders', 
onItemDisclosure: false, 
itemTpl: [ 
    '<div class="name">{name}</div>', 
      '<div class="description">{description}</div>' 
].join(''), 

을 그리고 나는이 특정 목록 (안 응용 프로그램의 모든 목록) 사용자 정의하기 위해 노력하고있어 일부 사용자 지정 CSS 정의가 : 나는 특정 목록 클래스 정의에 itemCls을 정의

.tenders { 
    padding: 0.7em 0.7em; 
} 

.tenders .name { 
    padding: 0em 1.5em 0em 0em; 
    font-size: large; 
    font-weight: bold; 
} 

.tenders .description { 
    font-size: small; 
    font-weight: light; 
    padding: 0em 0em 0em 0em; 
} 

.tenders .x-item-selected { 
    background-color: green; 
} 

을

그러나 선택한 항목이 녹색이 ​​아닙니다.

<div class="x-list-item-first x-list-header-wrap x-list-item x-stretched x-list-item-tpl tenders x-list-item-relative x-item-selected" id="ext-simplelistitem-211" style="min-height: 50px !important;"> 
    <div class="x-unsized x-list-disclosure x-item-hidden" id="ext-component-436" style="display: none !important;"></div> 
    <div class="x-innerhtml" id="ext-element-563"> 
    <div class="name">Name</div> 
    <div class="description">Description</div> 
    </div> 
</div> 

나는 또한 그 .tenders { padding: 0.7em 0.7em } 스타일이 적용되고 볼 수 있지만 .tenders .x-item-selected : 나는 크롬 디버거의 목록에서 선택한 항목에 첨부 된 다음과 같은 클래스를 볼 수 있습니다.

내가 뭘 잘못하고 있니?

Answer 1

사용 :

.tenders.x-item-selected { 
    background-color: green; 
} 

표준 엽차 CSS의 전체 경로를 사용하거나하는 것이 더 중요 코드를 만들 수

.tenders.x-list-item.x-item-selected.x-list-item-tpl 

또는

background-color:green!important; 

은 입찰 사이에 공백을 추가하지 마십시오 와 x-item-seleced는 같은 레벨에 있으며, 이름과 설명은 입찰가 내부에 있습니다. div