Sencha Touch-创建列表-想要将课程添加到最后一个项目

Question

我有一个正在创建的列表，如下所示：

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

我有一个来自{title}的Json文件，我想做什么，但不确定我想为样式目的附加一个类中的最后一个。

有任何想法吗？

Answer 1

我无法执行此代码，但我认为遵循这些原则可以解决问题：

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

Answer 2

我知道帖子很旧，这也是我的解决方案，因为它也适合Sencha Touch 2：

最简单的方法是使用scss：

（...）-这是列表项类的嵌套，在其中添加以下内容：

＆：first-child {...无论您在这里需要什么，还是最好使用mixin}

＆：last-child {...无论您在这里需要什么，还是更好地使用mixin}享受; o）

Answer 3

您可以将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);

要么

myList.on('afterrender', onUpdateOrLoad);

根据您的需要

以下是我的用法

一个列表，该列表的第一个和最后一个项目都进行了相应的四舍五入，而其余项目则保持一定角度，以提供分组的tableView效果。 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);

希望这有道理并能有所帮助。 谢谢