CODEWITHSUNDEEP
sencha-touch-2
os ip
os ip

Reputation: 67

SenchaTouch 2 how to set different color on each list row

I am using SenchaTouch 2 how to set different color on each list row.

SenchaTouch fiddle example:

http://www.senchafiddle.com/#MfLkR#wqVi1#eqWct

Upvotes: 0

Views: 3700

Answers (3)

Ronan Quillevere
Ronan Quillevere

Reputation: 3889

@bork

Change the padding of "x-list-item-label" so that it is 0 with css

Then create a new div which will be a kind of new container for your item inside your template, change the bckground color of this div.

Upvotes: 0

fuzzyLikeSheep
fuzzyLikeSheep

Reputation: 473

You could add a specific color to each row with css like

.x-list-item:nth-child(1n){
/* First Row */
background-color: Green;

}
.x-list-item:nth-child(2n){
/* Second Row */
background-color: Blue;

}
.x-list-item:nth-child(3n){
/* third Row */
background-color: Yellow;

}

Create a css file, name it whatever you want. Paste the code from my answer inside that css file. Reference that css file in your index.html. Or you can just put the style tags around the css code and place it directly in the head of your index.html. 

<link rel="stylesheet" type="text/css" href="touch2/resources/css/apple.css">
<link rel="stylesheet" type="text/css" href="newCssCode.css">

Upvotes: 2

Robert Merten
Robert Merten

Reputation: 221

You could add an "bgcolor" field to your data and change the itemTpl:

 items: [ {
   xtype: 'list',
   itemTpl: '<div style="height:35px; background: {bgcolor};">{title}</div>',
      data: [
         { title: 'Red BackGround', bgcolor : 'red' } // same thing for all the other items

Upvotes: 0

Related Questions