How to create a striped Ext.Dataview

Question

Ext.dataview.Dataview unlike Ext.dataview.List does not have a striped attribute.
Is there a straightforward way of simulating that?

I've tried using itemTpl in my DataView, but no luck.

itemTpl: '<tpl for=".">' + 
             '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}"></div>' + 
         '</tpl>'

Maybe my "for clause" is wrong. Maybe I shouldn't be iterating through the root node...

Answer 1

If you are using the itemTpl in the DataView the xindex value will be always one. Since it will create the xtemplate for each dataview item.

You can try using the css:

dataviewItemCls:nth-child(even) {background: #CCC}
dataviewItemCls:nth-child(odd) {background: #FFF}

ref :- http://www.w3.org/Style/Examples/007/evenodd.en.html