tree - 如何使用具有 'auto' 映射的 TreeStore？

Question

我有一个看起来像这样的模型:

Ext.regModel('TreeItem', {
    fields: [
             { name: 'ItemId', type: 'int' },
             { name: 'ItemType', type: 'string' },
             { name: 'Article', type: 'auto' },
             { name: 'Container', type: 'auto' },
             { name: 'Category', type: 'auto'}]
});

ItemType 指示该特定项目是否应呈现为文章、容器或类别。 Article、Container 和 Category 对象中的每一个都有关联的 ArticleName、ContainerName 和 CategoryName。

我想根据记录的 ItemType 在 NestedList 中呈现这些名称。所以我像这样覆盖了 getItemTextTpl:

getItemTextTpl: function (recordnode)
            {
                var template = '<div class="{ItemType}-icon"></div>';
                if (recordnode.firstChild.attributes.record.data["ItemType"] == 'Article')
                {
                    template += recordnode.firstChild.attributes.record.data['Article']["ArticleName"];
                }
                if (recordnode.firstChild.attributes.record.data["ItemType"] == 'Container')
                {
                    template += recordnode.firstChild.attributes.record.data['Container']["ContainerName"];
                }
                if (recordnode.firstChild.attributes.record.data["ItemType"] == 'Category')
                {
                    template += recordnode.firstChild.attributes.record.data['Category']["CategoryName"];
                }
                return template;   
            }

但是，似乎对于树的每个级别只调用一次 getItemTextTpl，因此无法呈现每个列表项的信息。

有没有人有关于如何实现这一点的建议？提前致谢。

Answer 1

您应该将条件逻辑从函数移动到模板中。这是一个示例，演示了您将如何执行此操作(尽管您可能需要对其进行修改才能使其正常工作):

getItemTextTpl: function (recordnode)
    {
        var template = '<div class="{ItemType}-icon"></div>' +
            '<tpl if="ItemType === \'Article\'">' +
                '{ArticleName}' +
            '</tpl>' +
            '<tpl if="ItemType === \'Container\'">' +
                '{ContainerName}' +
            '</tpl>' +
            '<tpl if="ItemType === \'Category\'">' +
                '{CategoryName}' +
            '</tpl>' +
        '</div>';
        return template;   
    }

我创建了一个 NestedList demo使用这种技术。 code is on github ，还有 a screencast展示它是如何 build 的。您可能还想查看我关于 Xtemplates 主题的两部分截屏视频系列( part one 和 part two)