Динамический шаблон элемента в NestedList

У меня есть вложенный список в моем приложении:

this.nestedList = new Ext.NestedList({
    store: app.stores.Document,
    cls:'list-espace',
    displayField : 'text', 
    toolbar: {
        ui:'dark',
        cls:'document-list-toolbar',
    },
    title:'/',
    scope : this,
    getItemTextTpl: function(node){
        return '<table height="40px" border="0"><tr><td style="vertical-align:middle;padding-left:5px;padding-right:5px;"><div class="nestedDefault {iconCls}"></div></td><td class="file-name" style="vertical-align:middle">{text}</td></tr></table>';
    }                              
});

1 - я хотел бы знать, является ли использование getItemTextTpl хорошим способом установки шаблона вложенных элементов списка (я пробовал с tpl: но это не работает)

2 - Мне также нужно изменить этот шаблон, когда я нажимаю кнопку, может кто-нибудь сказать мне, как это сделать?

Спасибо вам

Источник

3 ответа

Решение

1-й метод не будет работать, потому что tpl является параметром конфигурации NestedList и не используется в компоненте Ext.List, в этом компоненте tpl жестко закодирован

2-й метод не будет работать, потому что жестко закодированный шаблон Ext.List содержит теги span, окружающие содержимое функции getItemTextTpl, поэтому вы не можете поместить таблицу (то есть элемент уровня блока) в span (встроенный элемент)

Вы можете попробовать переопределить функцию getListConfig, чтобы предоставить свой собственный шаблон, подобный этому

var customNestedList = Ext.extend(Ext.NestedList, {
    getListConfig : function()
    {
        var listConfig = customNestedList.superclass.getListConfig.apply(this, arguments);

        listConfig.itemTpl = '';     // your custom tpl

        return listConfig;
    }
});

this.nestedList = new customNestedList({
    store: app.stores.Document,
    cls:'list-espace',
    displayField : 'text', 
    toolbar: {
        ui:'dark',
        cls:'document-list-toolbar',
    },
    title:'/',
    scope : this                              
});
Источник

Я знаю, что этот вопрос задавался больше года назад, но в любом случае вот ответ. это очень просто NestedList принимает дополнительное свойство конфигурации под названием "listConfig". Здесь вы устанавливаете параметры конфигурации для отдельных элементов списка во вложенном списке. Пример:

   listConfig:{
    itemTpl:'<b>{text}</b>: <img width="40" height="40" src="http://xyz.com/images/abc.png"/>'
},

Надеюсь это поможет:-)

Источник

Это сработало для меня, но вам нужно убедиться, что вы добавили его в тот момент, когда вы определяете дерево (не в слушателях и не внутри config)

getItemTextTpl: function(recordnode) {
    return "{text}"+"what ever is needed";          
},
Источник
Другие вопросы по тегам