javascript - sencha touch change colour of a specific list item -

have basic list component, want change row colour of rows depending on value/ have tried setting tpl doesnt seem work. appreciated

ext.create('ext.dataview.list', {     id : 'mylist',     store: mystore,     tpl: new ext.xtemplate(              '<tpl for=".">'              '    <tpl if="val == 0"><div style="background-color:red">{name}</div></tpl>',              '    <tpl if="val == 1"><div>{name}</div></tpl>',              '</tpl>'     ) }); 

ah, basic mistake, you've got in code ::

<tpl if="val == 0"> 

and should instead :::

<tpl if="val === 0"> 

** notice 3 "equal to" signs need add between 2 values you're comparing. if wrote

x=y  

then in template

x==y  // (you add equal)  

so conditional statement

x==y  //when you're checking if values equal 

becomes

x===y  

edit :: adding coding entire row filled background color assigned

note :: please make separate xtemplate object, , not inline tpl code. allow harness full potential of xtemplate, including member functions incredibly cool !

trial 1 ::

tpl code added background color

  '<li class="{[this.listclasses(xindex,xcount)]}">',           '<b>&nbsp; &nbsp;&nbsp; {nameofmeeting}</b>',           '<br>&nbsp; &nbsp;&nbsp;&nbsp;start time : {start} &nbsp; &nbsp;&nbsp;  ||  &nbsp; &nbsp;&nbsp;  end time : {end}',   '</li>',    {         listclasses : function(position, size){             var classes = [];             if (position%2===0) {classes.push("even")}             else                {classes.push("odd")};             if (position === 1) {classes.push("first")}             else                {classes.push("last")};             return classes.join(" ");         }     } 

//note : i've added in helper functions i'm using change background color of class. tpl, uses alternate color on every list line. if first line green, second yellow, third green, fourth yellow, , on.

associated css added (for listclasses selected in li tag)

#meetingslist li.odd { background-color: #ebdde2; } #meetingslist li.even { background-color: #fdeef4; } #meetingslist li.odd { border-bottom: 1px solid #999; } #meetingslist li.even { border-bottom-style: none; } 

edit trial 2 :: new css added

css

.testview .x-dataview-item {            border-bottom : 1px solid #cccbcb;        }         .testview .x-item-selected {           background-color: #006bb6;           background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #50b7ff), color-stop(2%, #0080da), color-stop(100%, #005692) );            background-image: -webkit-linear-gradient(#50b7ff, #0080da 2%, #005692);             background-image: linear-gradient(#50b7ff, #0080da 2%, #005692);             color: #fff;;             text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;             border-color: #103656;        } 

to add css code, add following list object ::

{  xtype : 'list'  . . . .   cls : 'testview' }