sencha触摸改变特定列表项的颜色

Question

有一个非常基本的列表组件，但想要根据值更改某些行的行颜色/我尝试过设置tpl，但它似乎不起作用。任何帮助，将不胜感激

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>' 
    ) 
}); 

Answer 1

这是我做的：

items: [{ 
    xtype: 'list', 
    id: 'patientList', 
    store: app.stores.patientList, 
    itemTpl: new Ext.XTemplate('<tpl if="overDue14Days &gt; 0"><div class="severeItem"></div></tpl><tpl if="overDue3Days &gt; 0"><div class="mildItem"></div></tpl>', '<div class="listBox">', '<div class="listText">{patientFirstName} {patientLastName}', '<div class="metadata">{numberOfOrders} orders</div>', '</div>', '<div class="listSpacer"></div>', '<div class="deleteItem" id="notMyPatientButton"></div>', '<div class="listArrow"></div>', '</div>'), 

在我的CSS，而不是背景色我用一个渐变背景：

.severeItem { 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0%,#fccdce), color-stop(10%, #fcc2c4), color-stop(50%,#fdaaac), color-stop(100%, #ff8891)); 
} 

    .mildItem{ 
     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0%,#feedba), color-stop(10%, #fcda8b), color-stop(50%,#fdd986), color-stop(100%, #ffe888)); 
    } 

Answer 2

啊，基本的错误，这是你的代码：

<tpl if="val == 0"> 

，这是它应该是什么，而不是:::

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

**注意三个“等于”，你需要你实际上比较两个值之间增加的迹象。所以，如果你通常在模板中写道

x=y 

那么这将是

x==y // (you basically add an extra equal) 

所以像

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

条件语句变为

x===y 

编辑::添加整行的编码填充指定的背景颜色

注::请制作单独的XTemplate对象，而不是内联tpl代码。这将使您充分利用XTemplate的全部潜力，包括令人难以置信的酷炫会员功能！

试验1 ::

TPL代码添加背景颜色

'<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(" "); 
     } 
    } 

//注：我已经在我使用改变助手功能添加班级的背景颜色。我的tpl基本上在每个列表行上使用了替代颜色。因此，如果第一行是绿色，第二行是黄色，第三行是绿色，第四行是黄色，依此类推。

相关CSS添加（在标签里选择的listClasses）

#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; } 

编辑试用2添加::新的CSS

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;  } 

要将CSS添加到代码中，请将以下内容添加到列表对象中::

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

Answer 3

这可能会迟到，但你可以做到这样

items: [{ 
    xtype: 'list', 
    id: 'patientList', 
    store: app.stores.patientList, 
    itemTpl: new Ext.XTemplate('<tpl if="overDue14Days &gt; 0"><div class="severeItem"></div></tpl><tpl if="overDue3Days &gt; 0"><div class="mildItem"></div></tpl>', '<div class="listBox">', '<div class="listText">{patientFirstName} {patientLastName}', '<div class="metadata">{numberOfOrders} orders</div>', '</div>', '<div class="listSpacer"></div>', '<div class="deleteItem" id="notMyPatientButton"></div>', '<div class="listArrow"></div>', '</div>'), 

，并在你的CSS文件中只需添加列表样式

.patientList.x-list-item 
{ 
    background-color: #ff0000;  
} 

Answer 4

1. 创建您自己的风格并覆盖sencha touch list-item css

.myList { 

    } 
.myList .x-list-item { 
    position:relative; 
    color:#333; 
    padding:0em 0em; 
    min-height:2.1em; 
    display:-webkit-box; 
    display:box; 
    border-top:1px solid #c8c8c8 

} 
.myList .x-list-item .brands-row-spon { 
    width: 100%; 
    background-color: #D8D8D8; 
    padding:0.5em 0.8em; 
    min-height:2.6em; 
} 
.myList .x-list-item .brands-row { 
    width: 100%; 
    min-height:2.6em; 
    padding:0.5em 0.8em; 
} 

1. 添加煎茶触摸列表项的CLS财产

new Ext.List({ 
     fullscreen: true, 
     id:'xList', 
     itemTpl :xListTpl, 
     cls:'myList', 
     grouped :true, 
     store: new Ext.data.Store({ 
     model:'yourModel' 
     }) 
     }) 

1. 添加的条件更改特定列表项的颜色列表itemTpl

var xListTpl = new Ext.XTemplate(
           '<tpl for=".">', 
           '<tpl if="isSponsored ==&quot;true&quot;"">', 
           '<div class="brands-row-spon">', 
           '</tpl>', 
           '<tpl if="isSponsored !=&quot;true&quot;"">', 
           '<div class="brands-row">', 
           '</tpl>', 
'</tpl>' 
           );