Javascript sencha Touch中列表的组模板

我想个性化列表的标题组。 首先，我有一个函数，它包含n乘以一个字符串：

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

var list=新的外部列表(
{
高度：document.height-150，
itemTpl:“blabla..”，
商店：listStore，
集团第三方物流：[
'',
'',
“+”.次（“{group}”）+”，
'',
“{items}”，
'',
'',
''
],
分组：对
});

---

但是它根本不起作用，我认为在javascript执行时，{group}值不会被替换。但是我该如何处理呢？

首先，它不能像您预期的那样工作，因为模板的占位符稍后会被替换，当您执行

''.times（“{group}”）

时，实际上您正在调用

String.prototype.times

并将

“{group}”作为参数，它不会工作

第二，我不习惯使用sencha touch，我可以提供一个（丑陋的）解决方案，但如果出现一些回答更友好的“sencha touch模板”，您会更好，代码如下：

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

非常感谢！！它工作得很好。但我不能说我的问题已经解决了

事实上，我使用模板组来显示星星的图片。例如，如果两个项目有一颗星，则将它们分组。所以在标题中，多亏了“普鲁士”，我们可以看到两张明星并置的照片

但是，如果我们向下滚动列表，当不同组的两个标题重叠时，图片将消失。我不知道它在组模板后面是如何工作的，但似乎“onload”函数被重新执行了。（因此，“groupTpl”属性针对列表中的每个卷进行评估）。有人能告诉我是否有更好的方法吗？
我不知道你是否收到SO关于我在回答中编辑的通知。好的，这似乎是一个很好的解决方案，我将有5张不同的图片，但不会太多。谢谢你的创造力；）这不是一个论坛，请不要使用答案作为回复。使用答案上的注释或编辑原始问题。
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
});