Установите различные фоновые изображения на Ext.list в сенча-касании

Question

Я работаю над приложением Sencha touch.

Я создал список, используя Ext.list Компонент сенсорного сенча.

Я установил фоновые изображения для все элемента списка с помощью CSS

.x-list .x-list-item { 
position: absolute !important; 
left: 0; 
top: 0; 
width: 100%; 
height:20px; 
background: url('../images/list_1.png'); 
background-repeat: no-repeat; 
background-size: 97% 98%; 
} 

Теперь я хочу, чтобы установить различные изображения для различных элементов списка. Это возможно?

Answer 1

Если вы используете tpl для создания элементов списка, просто дать элементам списка имя класса, что-то вроде:

tpl: '<div class="{bgimage}">This is list item 1.</div>' 

затем изменить bgimage свойства data, которые вы установили в список , что-то вроде этого sh Уальд сделать:

prepareData: function(data, index, record) { 
    data.bgimage = "bg-" + index; 
} 

Затем в CSS/SASS, вы можете сделать

.x-list-item.bg-1 { 
background-image: url('../images/list_1.png') 
} 
.x-list-item.bg-2 { 
background-image: url('../images/list_2.png') 
} 
… 

Вы можете настроить это для ваших потребностей, но это должно вам начать работу.

Если вы используете компоненты элемент списка (т.е. ваш список не имеет tpl конфигурации, но в itemCmp конфигурации), просто установите cls конфигурации по каждому пункту, чтобы получить тот же результат.

Answer 2

Если таргетинг на них с использованием nth-child не работает, вам, возможно, придется пройти более громоздкий маршрут и прикрепить отдельный класс к каждому элементу списка в html, а затем обработать их фоновые изображения в CSS, изменив свойство фона каждый по отдельности