NestedList 中的动态项目模板 [英] 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 - 我想知道使用 getItemTextTpl 是否是设置嵌套列表项模板的好方法(我已经尝试使用 tpl:但它不起作用)

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

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

谢谢

推荐答案

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

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

第二种方法将不起作用，因为 Ext.List 的硬编码模板包含围绕 getItemTextTpl 函数内容的 span 标记，因此您不能将表(即块级元素)放入 span(内联元素)中

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)

你可以尝试覆盖 getListConfig 函数来提供你自己的模板

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

这篇关于NestedList 中的动态项目模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！