Dynamic item template in NestedList

问题

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

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

回答2:

I know this question was asked more than a year back but anyway here's the answer. it's very simple. The NestedList accepts an additional config property called "listConfig'. This is were you set the config paramerters for individual list items inside the nested list. Example:

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

Hope this helps :-)

回答3:

This worked for me but you will have to make sure you add it at the point where you define the tree (not in listeners and not inside config)

getItemTextTpl: function(recordnode) {
    return "{text}"+"what ever is needed";          
},

来源：https://stackoverflow.com/questions/9468787/dynamic-item-template-in-nestedlist

标签

templates

sencha-touch