Even Odd list View

[nickponico]

Hi, I'm learning sencha touch framework, and I'm trying to have a list View with an "even-odd" css style: changing style between even rows and odd rows.

I've tried with itemTpl conditional like this


Ext.Panel({
...
items: [{
height:500,
xtype:"list",
store: listStore,
itemTpl: '<tpl for="."><tpl if="xindex%2==0"><div class="odd"></tpl><tpl if="xindex%2==1"><div class="even"></tpl> ...</div></tpl>',
}]
});


This code works but, it changes the internal div that is only an inner div of the list view: viewed effect is not correct, because not all the row has the style (like background-color).

How can I manage styles in the list views? Even - Odd, or selection style?

Is there anyone who can helps me?

Thanks

nick

[mitchellsimoens]

There is a CSS selector that you can set properties to just the even elements and also one for the odd elements. Google CSS selector and find the w3 site.

[nickponico]

There is a CSS selector that you can set properties to just the even elements and also one for the odd elements. Google CSS selector and find the w3 site.

Maybe i can't explained the problem quite well: the question is not "how can i set the css style"? But what sencha property or sencha css class should I set to have a list with the even odd effect?

How can I modify the code to have desired effect?

Nick

[mitchellsimoens]

To set style you can use


el.setStyle("background-color", "#f0f0f0")
el.setStyle({
"background-color": "#f0f0f0",
"color": "#000000"
})

To set class name you can use


el.addCls("class")
el.removeCls("class")

If you want to automatically set the odd/even rows, you can use the CSS3 selector nth-child. Look here: http://www.w3.org/TR/css3-selectors/


.class:nth-child(even) {
background-color: #f0f0f0;
}
.class:nth-child(odd) {
background-color: #f0f0f0;
}