sencha touch特定のリスト項目の色を変更する

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

をいただければ幸いここで私は何をすべきかです：代わりに、私は背景のグラデーションを使用し、背景色の私のCSSで

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

ああ、基本的な間違い、これはあなたのコードで何を得ているのですか::

<tpl if="val == 0"> 

そして、これは、それは代わりにどうあるべきかです:::

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

**あなたが実際に比較している2つの値の間に追加する必要が看板3「に等しい」に注目してください。あなたは、通常のテンプレートに続いて

x=y 

を書いたのであれば、それは

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

だから

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

などの条件文になるだろう

x===y 

EDIT ::追加行全体のコーディング割り当てられた背景色で塗りつぶされる

注::インラインtplコードではなく、別のXTemplateオブジェクトを作成してください。これは、あなたが信じられないほど涼しいメンバー関数を含む、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は、基本的にすべてのリスト行に代替色を使います。したがって、最初の行が緑色の場合、2番目の行は黄色、3番目の行は緑色、4番目の行は黄色、などです。

（LIタグで選択listClasses用）を追加する

関連するCSS

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

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

を追加するEDITトライアル2 ::新しいCSS

コードに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リスト項目をオーバーライドする

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