Sencha Touch: выбранный стиль списка не работает

Question

Это, наверное, очень простой вопрос, но по какой-то причине я не могу найти проблему в своем коде. У меня есть приложение Sencha Touch. Я определяю itemCls, в частности, определение списка класса:

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

И тогда у меня есть некоторые определения пользовательских CSS, где я пытаюсь настроить этот конкретный список (не все списки в приложении):

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

Однако выбранный элемент не является зеленым. Я могу видеть в Chrome отладчике следующие классы, прикрепленные к выбранному элементу в списке:

<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