Geek asks and answers

Change Sencha Touch 2 List Color

I have a list in my application, but it was interesting, is it possible for each displayed list to show a different background color, and not the same through each element?

I created a template, but it would be nice to have a background of each color change.

thank

EDIT: I also created the same list through "Ext.dataview.component.DataItem" / "DataView", so if it is easier to control separately, then this is great as I look at tampering with the process of creating each and setting its background if is it even possible.

+3
source share
4 answers

You can try to do this simply with 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

+2

Ext.query('class'). up(). addCls ('backgroundClass'); , , : ? "", DOM . / , , Ext.get(..)?

+1

, , xlist...

:

  • itemTpl <div> , 'id' :

    itemTpl: '< div class= "my_list_item_ {id}" > ... content... </DIV>

  • , , <div> "x-item-label", itemTpl <div> . ( ):

    Ext.select( 'my_list_item_1.) () ( "div.x- ') addCls (' background_item');...

"background_item" - CSS, .

( ( , , ), "itemTpl", "id" /. , //... , . , , , id, - "Ext.StoreManager.get(" MyStore "). GetAt (indexInList).get('id'))

, ...

0

Since Sencha Touch 2.2.1 , you can also use the parameter striped( more details here ). It will add the class x-list-item-oddto the odd elements of your list.

0
source

More articles: