ComponentView에서 선택된 행을 강조 표시 하시겠습니까?

Question

나는이 콘포 예 함께 일하고 있어요 : Kitten ComponentView

을 내 변형, 나는 사용자가 도청 때 xtype: 'list'에서 발생하는 것처럼, 선택된 행을 강조하고 싶습니다. 이것을 어떻게 할 수 있습니까?

Answer 1

예제 디렉토리의 Sencha Kiva example을 검토 한 결과 i .x-dataview-UI_NAME 클래스와 .x-list-item의 조합처럼 보입니다. UI_NAME이 정의 된 DataView 뷰 구성이 여기에 해당합니다. Kiva의 예에서는 'ui : loans'입니다.

 
.x-dataview-loans .x-list-item { 
... 
} 

뷰의 UI 접미사 정의 :

 
.x-dataview-loans .x-img { 
    margin-right: 1em; 
    background-position: center center; 
    width: 60px; 
    height: 60px 
} 

.x-dataview-loans .x-list-item { 
    padding: 1em; 
    border-bottom: 1px solid #e1e1e1; 
    -webkit-transition: linear .2s background 
} 

.x-dataview-loans .x-list-item .name div { 
    font-weight: bold 
} 

.x-dataview-loans .x-item-selected { 
    background: #fff 
} 

.x-dataview-loans .completion { 
    display: -webkit-box; 
    display: box; 
    -webkit-box-align: center; 
    box-align: center 
} 

.x-dataview-loans .completion .x-innerhtml { 
    display: -webkit-box; 
    display: box; 
    -webkit-box-align: stretch; 
    box-align: stretch; 
    height: 1em; 
    width: 100%; 
    border: 1px solid #bbb; 
    -webkit-box-shadow: inset 0 0 1px #fff; 
    padding: 1px; 
    -webkit-border-radius: 1em; 
    border-radius: 1em; 
    background-color: #e2e2e2; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c9c9c9), color-stop(10%, #d5d5d5), color-stop(65%, #e2e2e2), color-stop(100%, #e3e3e3)); 
    background-image: -webkit-linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3); 
    background-image: linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3) 
} 

.x-dataview-loans .completion .x-innerhtml .bar { 
    min-width: 1em; 
    border: 1px solid #4b9123; 
    -webkit-border-radius: 1em; 
    border-radius: 1em; 
    background-color: #74b446; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6e1b2), color-stop(2%, #87c05e), color-stop(100%, #639a3c)); 
    background-image: -webkit-linear-gradient(#c6e1b2, #87c05e 2%, #639a3c); 
    background-image: linear-gradient(#c6e1b2, #87c05e 2%, #639a3c) 
} 

Answer 2

당신은 tpl 속성을 사용하여이를 다음 <div> 태그 내에이 같은

뭔가,

.... 
xtype: 'list', 
tpl: '<div class="clickedItem"> ...' 
.... 

를 CSS의 class을 설정 한 다음 CSS 코드를 작성할 수 있습니다, 같은

.clickedItem{ 
    background: // some color value; 
    text-shadow: // some color value; 
}