How to change the selected item color for the list?

[Edward Lu]

Hello,

I have several cards that display several different lists. When the item in the list has been selected, the background color in the selected item will be changed to default blue. How can I change the background color for selected item in each list in each card?

My code is (for one list)

{ xtype: 'list',
store: 'mystore',
itemTpl: '<div class="x-list-normal, x-list-item,x-item-selected, x-list-item-label" style="background-color:white">{myvariable in the list} </div>'
}

This doesn't work, the selected item always has the default blue color in backgroud.

P.S. I want to change in different colors, not only one which is default blue to something.

Anyone has any suggestions? Thanks.

Edward

[Rhoover]

You'll be able to do this through the theming framework:

http://www.sencha.com/learn/theming-sencha-touch/

Specifically, you'll want to change the listitemselect class thusly

.listitemselect {
   background: $my_new_gradient;
   text-shadow: $my_new_stunning_effect;
}

To have a different color on different lists, you'll have to set up a cls within each config object afaik.

[Edward Lu]

Thank you Rhoover. I got it!