Sencha Touch 2 изменение фона списка

У меня есть список в моем приложении, но задавался вопросом, возможно ли, чтобы каждый отображаемый список отображал другой цвет фона, а не тот же самый через каждый элемент?Sencha Touch 2 изменение фона списка

Я создал шаблон, но было бы неплохо иметь фон каждого цвета изменения.

Благодаря

EDIT: Я также создал тот же список с помощью «Ext.dataview.component.DataItem»/«DataView» так, если это легче контролировать отдельно, то большой, как я смотрю на вмешательство в процессе создания каждого и установки его фона, если это вообще возможно.

источник

2012-04-15 Simon Davies

Я искал для этого тоже, и у меня был трудное время выяснить, как получить доступ к отдельным элементам в xlist ...

Это так, как я, наконец, сделал это:

в вашем itemTpl, добавить класс в < div>, используя свойство 'идентификатор' вашей модели:

itemTpl:»< DIV класс = "my_list_item_ {ID}"> ... содержание ... </div> '
сложной частью является то, что если вы хотите установить цвет фона для всей области элемента, вам нужно получить доступ к < div> с классом «x-item-label», который обертывает ваш itemTpl < div>. Вот как я это сделал (для первого элемента в качестве примера):

Ext.select ('. My_list_item_1'). First(). Up ('div.x-list-item-label'). addCls ('background_item');

где «background_item» - это стиль CSS, определяющий ваш цвет фона.

(Поскольку нет способа (по крайней мере, того, что я знаю), чтобы получить количество индексов ваших элементов в конфигурации «itemTpl», мне пришлось использовать автоматическое свойство «id» моей модели/магазина. Обратите внимание, что если вы примените фильтрацию/сортировку/... в своем магазине, это свойство больше не будет сортироваться. Поэтому, если вы хотите связать заказ, отображаемый в вашем списке, с свойством id, вы должны сделать что-то вроде 'Ext.StoreManager.get (' MyStore '). getAt (indexInList) .get (' идентификатор '))

Надеется, что это помогает ...

источник

2012-04-16 10:06:26 borck

Спасибо за это, я посмотрю на это позже. Я работал над использованием кнопок для решения моей проблемы на данный момент. Bu twill посмотрим, смогу ли я победить то, что вы объяснили, и дайте знать всем –

@borck, вас может заинтересовать метод длины: heres sample itemTpl: '

{comments.length - 2} более старые комментарии

'(цитата), но я никогда не пробовал его на корневом элементе, хотя – igrek

Вы можете попробовать сделать это с просто XTemplate:

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>', 
    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>', 
    '<p>Kids: ', 
    '<tpl for="kids">', 
     '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">', 
     '{name}', 
     '</div>', 
    '</tpl></p>' 
);

взглянуть на их объяснения, могли бы найти что-то интересное:.. http://docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate

источник

2012-05-15 14:42:32 igrek

Я видел много вариантов на Ext.query ('класс') вверх() addCls ('backgroundClass') ; хак, который имеет для меня прекрасный смысл, но мой вопрос: КОГДА люди называют это? Я не могу поместить его в «нарисованный», поскольку DOM пока не существует. Где/когда вы, ребята, выполняете вызов Ext.get (..)?

источник

2012-11-01 20:12:45

С Sencha Touch 2.2.1 также можно использовать параметр striped (more info here). Он добавит класс x-list-item-odd к нечетным элементам вашего списка.

источник

2013-07-04 11:50:28

Sencha Touch 2 изменение фона списка

ответ

Смежные вопросы