sencha touch belirli bir liste öğesinin renk değiştirmesine izin ver

Question

çok temel bir liste bileşenine sahiptir, ancak bir satırın bazı satırlarının satır rengini değiştirmek istiyorum/bir tpl ayarlamaya çalıştım ama işe yaramıyor. Herhangi bir yardım

İşte

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

mutluluk duyacağız var benim yaptığım: yerine bir arka plan gradyan kullandığımız bir arka plan renginin benim css olarak

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

:

.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, temel hata, Bu, kodunuzda sahip olduğunuz şeydir ::

<tpl if="val == 0"> 

Ve bu ::: yerine olmalıdır

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

** üç edin şeydir "eşit" sen aslında kıyaslıyorsun iki değer arasındaki eklemem gerekiyor işaretler. Normalde bir şablonda Sonra

x=y 

yazdıysam Yani

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

Yani

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

gibi bir koşullu önerme Oldu olacak

x===y 

DÜZENLEME :: ekleme tüm satır için kodlama atanan arka plan rengi ile doldurulacak

NOT: Lütfen ayrı bir XTemplate nesnesi hazırlayın ve tpl kod satırını belirtin. Bu, inanılmaz derecede mükemmel olan üye fonksiyonları da dahil olmak üzere XTemplate'in tüm potansiyelini kullanmanıza izin verecektir!

1 ::

tpl Kod arka plan rengi için eklenecek Deneme

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

// Not: Ben değişime kullanıyorum yardımcı fonksiyonları ekledik sınıfın arka plan rengi. Benim tpl, temelde her liste satırında alternatif renk kullanır. Yani ilk satır yeşil, ikinci sarı, üçüncü yeşil, dördüncü sarı, vb.

İlişkili CSS eklenecek (li etiketi seçilen listClasses için)

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

:: Yeni CSS eklenecek 2 DÜZENLEME Deneme

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'yi Kod içine eklemek için, liste nesnesine aşağıdakileri ekleyin ::

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

Answer 3

Bu geç olabilir ama bunu

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

ve css dosyasında

sadece

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

Answer 4

1. kendi stilinizi oluşturun liste stil eklemek bu şekilde yapabiliriz ve sencha dokunma listesini geçersiz kıl liste-öğesi 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 dokunmatik liste öğesinin cls özellik ekleyin

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

1. listenizde belirli bir liste öğesinin rengini değiştirmek için bir koşul ekle 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>' 
           );