Question

I have a nested list in my application :

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 – I would like to know if using the getItemTextTpl is the good way of setting the template of the nested list items (I’ve tried with tpl: but it doesn’t work)

2 – I also need to change that template when I click a button, does someone could tell me how to do that ?

Thanks you

Answer 1

1st method will not work because because tpl is a config option of NestedList and its not used in Ext.List component, in this component tpl is hardcoded

2nd method will not work because hardcoded template of Ext.List contains span tags surrounding contents of getItemTextTpl function so you can’t put a table (ie block-level element) into a span (inline element)

you can try to override getListConfig function to provide your own template like this

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