PDA

View Full Version : Even Odd list View



nickponico
31 Jan 2011, 7:31 AM
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
31 Jan 2011, 12:33 PM
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
31 Jan 2011, 3:44 PM
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
31 Jan 2011, 4:02 PM
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;
}