How to change the background color of the grouped

Question

I have a list with 2 groups. I want to override the default background color of the headings given to the group in the list. How to change the background color of the grouped heading in List in sencha touch 2?

Answer 1

You can easily do this by adding ur own class to the list and the find the class names that define the styles for the headers using the chrome developer tools.

Add cls to the list like

{
    xtype: 'list',
    itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
    disclosure: true,
    grouped: true,           
    cls:'customHeader',
    store: store
}

Add the following css style

.customHeader .x-list-header {
    background-color: red;
    background-image: none;
    border-color: red;
    color: beige;
}

To change the header color based on model value this Sencha Fiddle, JSFiddle might give you an idea.