Групповой шаблон для списка в Сенча Touch - PullRequest
Новая
       0

Групповой шаблон для списка в Сенча Touch

1 голос
/ 19 октября 2011

Я хочу персонализировать группу заголовков для списка. Прежде всего, у меня есть эта функция, которая объединяет n раз строку: 

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

Итак, я хочу n раз повторить HTML-тег img: 

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. Но как я могу справиться с этим?

Ответы [ 2 ]

0 голосов
/ 20 октября 2011

Спасибо большое !! Работает хорошо. Но я не могу сказать, что моя проблема решена.

На самом деле я использую группу шаблонов для отображения изображений звезд. Например, если два элемента имеют одну звезду, они группируются. Таким образом, в заголовке и благодаря «Пруссе» мы можем видеть два сопоставленных изображения звезды.

Но, если мы свернем список, изображения исчезнут, когда два заголовка разных групп перекрываются. Я не знаю, как это работает за групповым шаблоном, но кажется, что функция "onload" перезапускается. (таким образом, свойство «groupTpl» оценивается для каждого броска в списке). Кто-то может сказать мне, если есть лучший способ сделать это?

0 голосов
/ 19 октября 2011

Во-первых, это не сработает так, как вы ожидаете, потому что заполнители шаблонов заменяются позже, и когда вы делаете '<img height="20" src="imgPath"/>'.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
});

Это работает, если {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
});
...