Question

我的应用程序中有一个嵌套列表：

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 - 当我点击按钮时，我还需要更改该模板，有人可以告诉我该怎么做吗？

谢谢你

Answer 1

第一种方法不起作用，因为因为tpl是NestedList的配置选项并且它没有在Ext.List组件中使用，所以在这个组件中tpl是硬编码的

第二种方法不起作用，因为Ext.List的硬编码模板包含围绕getItemTextTpl函数内容的span标签，因此您不能将表（即块级元素）放入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                              
});

Answer 2

我知道这个问题是在一年多前被问到的，但无论如何这里是答案。这很简单。 NestedList接受名为“listConfig”的附加配置属性。这是您为嵌套列表中的各个列表项设置配置参数。例如：

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

希望这会有所帮助： - ）

Answer 3

这对我有用，但你必须确保在定义树的位置添加它（不是在监听器中而不是在配置内）

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

NestedList中的动态项模板

3 个答案: