сенсорное изменение цвета определенного элемента списка

ProgramBox

сенсорное изменение цвета определенного элемента списка

Post author:admin
Запись опубликована:4 февраля, 2023
Post category:Вопросы по программированию

#javascript #list #sencha-touch

#javascript #Список #sencha-touch

Вопрос:

у вас есть очень простой компонент списка, но вы хотите изменить цвет строк некоторых строк в зависимости от значения/ Я попытался установить 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>'
    )
});

Ответ №1:

Ах, основная ошибка, это то, что у вас есть в вашем коде ::

 <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>amp;nbsp; amp;nbsp;amp;nbsp; {nameOfMeeting}</b>',
          '<br>amp;nbsp; amp;nbsp;amp;nbsp;amp;nbsp;Start Time : {start} amp;nbsp; amp;nbsp;amp;nbsp;  ||  amp;nbsp; amp;nbsp;amp;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)

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

1. проблема в том, что окрашена только средняя область, а не вся строка — см. Другой комментарий…

2. @swalkner: я добавил в часть ответа цвет фона. Можете ли вы попробовать приведенный выше код?

3. к сожалению, он также не окрашивает всю ячейку… см. dl.dropbox.com/u/119600/senchatouch.png

4. @swalkner: я добавил «пробную версию 2» в приведенный выше код. Кажется, это работает на моей стороне. Можете ли вы попробовать? Если это сработает, я удалю нерабочий код

5. к сожалению, это вообще не работает:/ У меня есть код на github, вы видите какие-либо ошибки? github.com/haemi/CrossfitSencha/blob/master/app/view /… и github.com/haemi/CrossfitSencha/blob/master/resources/sass /… спасибо!

Ответ №2:

Это может быть поздно, но вы можете сделать это таким образом

 items: [{
    xtype: 'list',
    id: 'patientList',
    store: app.stores.patientList,
    itemTpl: new Ext.XTemplate('<tpl if="overDue14Days amp;> 0"><div class="severeItem"></div></tpl><tpl if="overDue3Days amp;> 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;     
}

Ответ №3:

Вот что я делаю:

 items: [{
    xtype: 'list',
    id: 'patientList',
    store: app.stores.patientList,
    itemTpl: new Ext.XTemplate('<tpl if="overDue14Days amp;> 0"><div class="severeItem"></div></tpl><tpl if="overDue3Days amp;> 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. спасибо за пример! Будет ли это окрашивать всю строку списка? Я пробовал что-то подобное, и оно окрашивало только среднюю область (div, содержащий текст)

2. stan229 — как вы этого добились? Когда я делаю это таким образом, я получаю тот же результат, что и @neolaser — окрашивается только средняя область

3. @neolaser :: Пожалуйста, выберите ответ, соответствующий вашему запросу, и проголосуйте за него, чтобы закрыть эту тему.

4. @SashaZd : почему? проблема еще не решена, если я правильно понимаю — не вся строка окрашена…

5. Насколько я понимаю, вся строка еще не окрашена. Надеюсь, кто-нибудь сможет найти решение…

Ответ №4:

Создайте свои собственные стили и переопределите 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;
}

Добавить свойство cls элемента списка sencha touch

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

Добавьте условие для изменения цвета определенного элемента списка в вашем списке itemTpl

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