CODEWITHSUNDEEP
treesencha-touch
Case
Case

Reputation: 1847

How do I use a TreeStore with 'auto' mappings?

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.

Upvotes: 4

Views: 791

Answers (2)

Case
Case

Reputation: 1847

This can't be done. I genericized my objects and used the regular mappings. You can't use auto mappings with a template.

Upvotes: 0

nelstrom
nelstrom

Reputation: 19552

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)

Upvotes: 3

Related Questions