PDA

View Full Version : Stripe rows in list view



simon
20 Dec 2010, 5:08 AM
I have listView and I would like to stripe rows.
I tried with:




var partView = new Ext.list.ListView({...});
partView.innerBody.select("dl:odd").addClass("altRow");


But there is no altRow calss in client code. What could be worng?

Thank you for your answer,
Simon

axxerion
20 Dec 2010, 5:37 AM
I do this on my CSS file

.x-list-group-items > div:nth-child(odd){background-color:<your color>;}

simon
20 Dec 2010, 7:38 AM
I tried with css, still the same.

I also checked with firebug, no such background color in any div.

Any idea?

br, Simon

axxerion
20 Dec 2010, 8:06 AM
Chrome ?

simon
21 Dec 2010, 2:33 AM
Also in crome, the same result.

I cant see the stripe rows even if I choose black color :)

I tried on empty page where is just list view control but still the same result.

Any idea?

br,

pppswing
21 Dec 2010, 3:04 AM
Can you show us the XTemplate you used to render your list ?

The ListView Container is not a GridPanel, it doesn't render data with x-list-group. You can see it with firebug.

You should either :
- use a GridPanel (stripRows:true) instead of ListView or
- write a tpl for your ListView with class name you want to strip rows by yourself.

simon
21 Dec 2010, 6:24 AM
Do you have any example for writing template for listView distinguish between odd and even elements?

But still I would like to know, why this won't work:
partView.innerBody.select("dl:odd").addClass("altRow");

In debug mode function partView.innerBody.select("dl:odd") returns some elements, and they have addClass method.

This works for example:
partView.innerBody.select("").addClass("altRow");

It looks like that select("dl:odd") doesn't work or I call it too soon, after view is created?

pppswing
21 Dec 2010, 6:40 AM
You must do this when the store is loaded and when the List is rendered
otherwise dl are not existing yet

simon
21 Dec 2010, 11:21 PM
Well, in debug mode partView.innerBody.select("dl:odd") returns array of elements, so they exists?