1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    1
    IainP is on a distinguished road

      0  

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

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    1
    IainP is on a distinguished road

      0  

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    1
    IainP is on a distinguished road

      0  

    Default


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

Thread Participants: 1