Sencha触摸改变一个特定的列表项目的颜色

sencha touch change colour of a specific list item

本文关键字：列表 颜色 项目 一个 改变 触摸 Sencha      更新时间：2023-09-26

有一个非常基本的列表组件，但想改变一些行的行颜色取决于一个值/我已经尝试设置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>'
    )
});

啊，基本错误，这就是你在代码中得到的::

<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(对于在li标签中选择的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; }

EDIT Trial 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添加到Code中，请向列表对象添加以下内容::

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

这可能有点晚了，但你可以这样做

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

我是这样做的:

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));
    }
  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. 添加sencha触摸列表项的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>'
                                );
相关文章：