如何将 TreeStore 与“auto”一起使用映射？

发布于 2024-11-04 20:17:04 字数 1529 浏览 1 评论 0 原文

我有一个如下所示的模型：

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 只为树的每个级别调用一次，因此无法呈现每个列表项的信息。

有人对如何实现这一目标有建议吗？提前致谢。

原文

I have a model that looks like this:

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

The ItemType indicates whether that specific item should be rendered as an Article, Container, or Category. Each of the Article, Container, and Category objects has an associated ArticleName, ContainerName, and CategoryName.

I'd like to render these names in a NestedList based on the record's ItemType. So I overrode the getItemTextTpl like this:

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

However, it appears that getItemTextTpl is only called once for each level of the tree, so there's no way to render the information for each list item.

Does anyone have suggestions on how to accomplish this? Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笙痞 2024-11-11 20:17:04

您应该将条件逻辑从函数移至模板中。下面是一个示例，演示了如何执行此操作（尽管您可能需要修改它才能使其正常工作）：

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 演示。代码位于 github 上，还有一个截屏视频演示了它是如何构建的。您可能还想查看我关于 Xtemplates 主题的两部分截屏视频系列（第一部分和第二部分)

You should move your conditional logic from the function into the template. Here's an example that demonstrates how you would go about doing this (although you will probably have to modify it to get it to work):

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

I created a NestedList demo that uses this technique. The code is on github, and there is also a screencast demonstrating how it was built. You might also want to check out my two part series of screencasts on the subject of Xtemplates (part one and part two)