Results 1 to 5 of 5

Thread: If item in TreeStore is leaf show a different template

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    22

    Default Answered: If item in TreeStore is leaf show a different template

    Hi guys,

    I have a nested list displaying a treestore. In my getItemTextTpl function I would like to output a different a template based on whether the item in the treestore is a leaf or not.

    The following always returns the first template even though record.get('leaf') can be either equal to false or true.

    Code:
    getItemTextTpl : function(node) {
                    
                    treeStore.each(function(record, index, animated) {
                        if(record.get('leaf') == false) {
                            console.log('Index : ' + index + ' Is leaf: ' + record.get('leaf'));
                            template = '<div class="branch">{text}</div>';
                            }else{
                            console.log('Index : ' + index + ' Is leaf: ' + record.get('leaf'));
                            template = '<div class="leaf">{text}</div>';
                            }
                    });
                    
                    return template;
                    
                },
    Here is the console log:

    Index : 1 Is leaf: false
    Index : 2 Is leaf: true
    Index : 3 Is leaf: true
    Index : 4 Is leaf: false
    Index : 5 Is leaf: false
    Index : 6 Is leaf: false
    Index : 7 Is leaf: false
    Index : 8 Is leaf: false
    Index : 9 Is leaf: false
    Index : 10 Is leaf: false
    Index : 11 Is leaf: false
    Index : 12 Is leaf: false

    Thanks guys.

  2. Do it like this:

    Code:
    getItemTextTpl : function() {
        return '<div class="<tpl if=\"leaf == true\">leaf<tpl else>branch</tpl>">{' + this.getDisplayField() + '}</div>'
    }

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    Do it like this:

    Code:
    getItemTextTpl : function() {
        return '<div class="<tpl if=\"leaf == true\">leaf<tpl else>branch</tpl>">{' + this.getDisplayField() + '}</div>'
    }
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    22

    Default

    Thanks Mitchell. I can definitely use that.

    Actually what I'm really trying to accomplish is hiding the onitemdisclosure icon on just the parent items of a nested list. I've been searching for hours and can't seem to find a solution.

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    For that, in your response return false for disclosure. Here is an example of just a list:

    Code:
    Ext.Viewport.add({
        xtype            : 'list',
        itemTpl          : '{foo}',
        onItemDisclosure : true,
        store            : {
            fields : ['foo', 'disclosure'],
            data   : [
                { foo : 1, disclosure : true  },
                { foo : 2, disclosure : false }
            ]
        }
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    22

    Default

    Mitchell! You're awesome! I was searching for a solution to that problem for hours! Thanks a lot dude!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •