sencha觸摸列表的組模板

我想個性化列表的標題組。所有的首先我有這個功能，CONCAT n次的字符串：sencha觸摸列表的組模板

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

不過，這並不在所有的工作，我認爲「{組}」值不會替換爲JavaScript執行。但我該如何處理？

來源

2011-10-19 Santana6.35

我不知道你是否收到我的答覆通知我的編輯。 – Prusse

首先，它不會像你期望的那樣工作，因爲模板佔位符將在稍後被替換，並且當您執行'<img height="20" src="imgPath"/>'.times("{group}")時，實際上您正在調用String.prototype.times和"{group}"作爲參數，它將不起作用。第二，我不習慣使用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 
});

來源

2011-10-19 16:19:28 Prusse

好吧，它似乎是一個很好的解決方案，我會有5個不同的圖片，但它不是太多。感謝您的創造力;） –

非常感謝！它運作良好。但我不能說我的問題解決了。

事實上，我使用模板組來顯示星星圖片。例如，如果兩個項目有一個星號，則它們被分組。所以在標題中，並感謝「Prusse」，我們可以看到兩個並列的恆星照片。

但是，如果我們向下滾動列表，當不同組的兩個標題重疊時，圖片正在消失。我不知道它是如何工作在組模板後面，但似乎函數「onload」被重新執行。（因此對列表中的每個捲進行「groupTpl」屬性的評估）。有人可以告訴我是否有更好的方法來做到這一點？

來源

2011-10-20 08:08:07

這不是一個論壇，請不要使用答案作爲答覆。使用評論的答案或編輯您的原始問題。 – Soviut

sencha觸摸列表的組模板

回答

相關問題