sencha Touch中列表的组模板

Question

我想个性化列表的标题组。 首先，我有这个函数，它连接n次String：

String.prototype.times = function(n) {
  return Array.prototype.join.call({length:n+1}, this);
};

所以我想重复n次img html标签：

var list = new Ext.List(
{
   height : document.height - 150,
   itemTpl : "<div>blabla..</div>",
   store : listStore,
   groupTpl :[
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',
                '<h3 class="x-list-header">'+ '<img height="20" src="imgPath"/>'.times("{group}")+ '</h3>',
                '<div class="x-list-group-items">',
                '{items}',
                '</div>',
            '</div>',
        '</tpl>'
    ],
    grouped : true
 });

但这根本不起作用，我认为“ {group}”的值不能代替javascript执行。 但是我该如何处理呢？

Answer 1

首先，它不能按预期工作，因为模板占位符会在以后替换，并且当您执行'<img height="20" src="imgPath"/>'.times("{group}")实际上以"{group}"为参数调用String.prototype.times ，它将无法正常工作。

其次，我不习惯使用sencha-touch，我可以提供一个（丑陋的）解决方法，但是如果出现一些答案更友好的“ sencha-touch template”，您会得到更好的效果，代码是：

function repeatImg(el, n){
    var newel = null;
    for (var i = 0; i < n; ++i){
        newel = el.cloneNode(false);
        newel.onload = null;
        el.parentNode.insertBefore(newel, el);
    }
    newel = null;
}
var list = new Ext.List(
{
   height : document.height - 150,
   itemTpl : "<div>blabla..</div>",
   store : listStore,
   groupTpl :[
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',
                '<h3 class="x-list-header">'+ '<img height="20" src="imgPath" onload="repeatImg(this, parseInt({group}, 10) - 1);"/>'+ '</h3>',
                '<div class="x-list-group-items">',
                '{items}',
                '</div>',
            '</div>',
        '</tpl>'
    ],
    grouped : true
});

如果{group}被数字取代，并且没有测试其他值（例如字符串），则此方法有效；

编辑：您还可以具有各种图像，例如'img-0.png'，'img-1.png'，...，'img-n.png'，并使用如下代码：

var list = new Ext.List(
{
   height : document.height - 150,
   itemTpl : "<div>blabla..</div>",
   store : listStore,
   groupTpl :[
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',
                '<h3 class="x-list-header">'+ '<img height="20" src="img-{group}.png" />'+ '</h3>',
                '<div class="x-list-group-items">',
                '{items}',
                '</div>',
            '</div>',
        '</tpl>'
    ],
    grouped : true
});

Answer 2

非常感谢 ！！ 效果很好。 但是我不能说我的问题已经解决。

实际上，我使用模板组来显示星星的图片。 例如，如果两个项目只有一颗星，则会将它们分组。 因此，在标题中并感谢“ Prusse”，我们可以看到两个并列的恒星图片。

但是，如果我们向下滚动列表，则当不同组的两个标题重叠时，图片将消失。 我不知道它在组模板后面如何工作，但似乎函数“ onload”已重新执行。 （因此，将为列表中的每个滚动评估“ groupTpl”属性）。 有人可以告诉我是否有更好的方法吗？