Sencha Touch - Создание списка - Хотите добавить класс к последнему элементу - PullRequest
Новая
       7

Sencha Touch - Создание списка - Хотите добавить класс к последнему элементу

0 голосов
/ 30 марта 2011

У меня есть список, который я создаю так: 

        var listTpl = new Ext.XTemplate(
        '<div class="menuListItemContainer">',
            '<h1>MENU</h1>',
            '<tpl for=".">',
                    '<div class="menuListItem">',
                        '{title}',
                    '</div>',
            '</tpl>',
        '</div>',
        '<div class="x-clear"></div>'
    );

У меня есть файл Json, откуда берется {title}, что я хотел бы сделать, но не уверен, как последнийВ последнем пункте я хотел бы прикрепить класс для стилизации.

Есть идеи?

Ответы [ 3 ]

2 голосов
/ 27 марта 2012

Я знаю, что пост старый, вот мое решение, так как оно подходит и для Sencha Touch 2:

Самый простой способ, используйте scss:

(...) - вот вложение вашего класса элемента списка, внутри добавьте следующее:

&: first-child { ... все, что вам нужно здесь или лучше использовать миксин }

&: last-child { ... все, что вам нужно здесь или лучше использовать миксин } Наслаждайся; о)

2 голосов
/ 30 марта 2011

Я не в состоянии выполнить этот код, но я думаю, что что-то в этом роде поможет: 

var listTpl = new Ext.XTemplate(
   '<div class="menuListItemContainer">',
      '<h1>MENU</h1>',
      '<tpl for=".">',
         '<div class="menuListItem {[xindex === xcount ? "extraClass" : ""]}">',
            '{title}',
         '</div>',
      '</tpl>',
   '</div>',
   '<div class="x-clear"></div>'
);
0 голосов
/ 27 декабря 2011

вы можете оставить определение Ext.List чистым и добавлять класс к элементу tpl каждый раз, когда список обновляется или отображается. 

var onUpdateOrLoad = function(cmp, index, element, e)
{

    var styleClass;
    for (var i = 0; i < cmp.store.data.length; i++)
    {
           if(i%3==0)
            {
            styleClass= 'mm-box-colored-red'; //every third item                          
            }
        Ext.get(cmp.getNode(i)).addCls(styleClass);
    }
}

и затем где-нибудь внизу добавьте: 

   myList.on('update', onUpdateOrLoad);

OR 

myList.on('afterrender', onUpdateOrLoad);

в соответствии с вашими потребностями

Вот мое использование

список, в котором первый и последний элементы округлены соответственно, а остальные элементы оставлены угловыми, чтобы получить эффект сгруппированного табличного представления. var onUpdateOrLoad = function (cmp, index, element, e) {

    var styleClass;
    for (var i = 0; i < cmp.store.data.length; i++)
    {   
        if(i==0)
        {           
            styleClass = 'mm-box-rouded-up';  // first item in the list
        }else if(i==cmp.store.data.length-1)
        {
            styleClass= 'mm-box-rounded-down';  //last item in list
        }
        else{
            styleClass= 'mm-box-rounded-no';
        }
    }
}

torList.on('update', onUpdateOrLoad);

Надеюсь, что это имеет смысл и поможет. Спасибо

...