Sencha Touch 2 list background change

Question

I have a list within my application, but was wondering if it is possible to have each list displayed show a different background colour, rather than the same one through out each item?

I have created a template but would be nice to have the background of each change colour.

Thanks

EDIT: I have also created the same list via a 'Ext.dataview.component.DataItem' / 'DataView' so if this is easier to control separately then great, as I am looking at interfering in te process of creating each and setting its background, if that is at all possible.

score 2 · Answer 1 · answered May 15 '12 at 14:42

You could try to do that with simply 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>'
);

take a look at their explanations, might find something interesting: http://docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate

score 1 · Answer 2 · answered Nov 01 '12 at 20:12

I have seen many variants on the Ext.query('class').up().addCls('backgroundClass'); hack, which makes perfect sense to me, but my question is WHEN are people calling this? I can't put it in 'painted', since DOM doesn't seem to exist yet.. where/when are you guys executing the Ext.get(..) call?

borck · Answer 3 · 2012-04-16T11:08:38.843

I have been looking for this also, and I had a hard time finding out how to access the individual items of a xlist...

This is the way I finally did it:

in your itemTpl, add a class to your < div >, using the property 'id' of your model:

itemTpl:'< div class="my_list_item_{id}"> ... content ... < /div>'
the tricky part is that if you want to set the background color of the whole item area, you have to access to < div > with class 'x-item-label' that is wrapping your itemTpl < div >. Here is how I did it (for the first item as an example):

Ext.select('.my_list_item_1').first().up('div.x-list-item-label').addCls('background_item');

where 'background_item' is a CSS style, defining your background color.

(Since there is no way (at least that I know of) to get the index count of your items in the 'itemTpl' config, I had to use to automatic 'id' property of my model/store. Note that if you apply filtering/sorting/... on your store, this property will not be sorted anymore. So if you want to link the order displayed in your list to the 'id' property, you have to do something like 'Ext.StoreManager.get('MyStore').getAt(indexInList).get('id') )

Hope this helps...

Thanks for this, I will have a look at this later on. I worked on using buttons to solve my issue for the moment. Bu twill look to see if I can conquer what you have explained and let you all know — Simon Davies, Apr 16 '12 at 11:57
@borck, you might be intrested in the length method: heres a sample itemTpl:'
{comments.length - 2} older comments
' (quotes matter) but i never tried it on the root element though — igrek, May 15 '12 at 14:28

score 0 · Answer 4 · answered Jul 04 '13 at 11:50

0

Since Sencha Touch 2.2.1 it's also possible to use striped parameter (more info here). It will add x-list-item-odd class to odd items of your list.

answered Jul 04 '13 at 11:50

Andrey Rudenko

1,271
20
34

Sencha Touch 2 list background change

4 Answers4