sencha touch cambia colore di una voce specifica dell'elenco

Question

ha un componente di lista molto semplice, ma vuole cambiare il colore di riga di alcune righe a seconda di un valore/Ho provato a impostare un tpl ma non sembra funzionare. Qualsiasi aiuto sarebbe apprezzato

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

Ecco quello che faccio:

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>'), 

Nel mio css invece di un colore di sfondo che uso un gradiente di sfondo:

.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

Ah, errore di base, questo è quello che hai nel tuo codice:

<tpl if="val == 0"> 

e questo è ciò che dovrebbe essere invece :::

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

** Si noti il ​​tre "uguale a" segni che avete bisogno di aggiungere tra i due valori si sta effettivamente confronto. Quindi, se si normalmente scritto

x=y 

Poi, in un modello che sarebbe

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

Così un'istruzione condizionale come

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

Diventa

x===y 

EDIT :: Aggiunta la codifica per l'intera riga da riempire con il colore di sfondo assegnato

NOTA: Creare un oggetto XTemplate separato e non un codice tpl in linea. Ciò ti consentirà di sfruttare appieno il potenziale di XTemplate, incluse le funzioni membro incredibilmente fantastiche!

Trial 1 ::

Codice tpl da aggiungere per il colore di sfondo

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

// Nota: ho aggiunto nelle funzioni di supporto che sto usando al cambiamento il colore di sfondo della classe. Il mio tpl, in pratica usa colori alternati su ogni lista. Quindi se la prima riga è verde, la seconda è gialla, la terza è verde, la quarta è gialla e così via.

Associated CSS da aggiungere (per le listclasses selezionati nel tag Li)

#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 :: Nuovo CSS da aggiungere

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

Per aggiungere il codice CSS al codice, aggiungere quanto segue all'oggetto lista ::

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

Answer 3

Questo può essere in ritardo, ma si può fare in questo modo

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>'), 

e nel file css basta aggiungere lo stile di elenco

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

Answer 4

1. creare stili e sostituisci 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. Aggiungere proprietà cls di sencha elemento della lista tocco

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

1. aggiungere una condizione per cambiare il colore di una voce di elenco specifico nella lista 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>' 
           );