Results 1 to 7 of 7

Thread: Template for nestedlist items

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    72
    Vote Rating
    3
      0  

    Default Template for nestedlist items

    I have a nested list in my application :

    Code:
    this.nestedList = new Ext.NestedList({
            store: app.stores.Document,
            cls:'list-espace',
            displayField : 'text', 
            toolbar: {
                ui:'dark',
                cls:'document-list-toolbar',
            }
            title:'/',
            scope : this,
            getItemTextTpl: function(node){
    return'<table height="40px" border="0"><tr><td style="vertical-align:middle;padding-left:5px;padding-right:5px;"><div class="nestedDefault {iconCls}"></div></td><td class="file-name" style="vertical-align:middle">{text}</td></tr></table>';
            }
        });
    1 - I would like to know if using the getItemTextTpl is the good way of setting the template of the nested list items (I've tried with tpl: but it doesn't work)
    2 - I also need to change that template when I click a button, does someone could tell me how to do that ?
    Thanks you

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Vote Rating
    1525
      0  

    Default

    getItemTextTpl is the proper way to configure the template that each child list uses. To change the template after a list is created you have to change the tpl and refresh the list causing it to redraw itself.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    72
    Vote Rating
    3
      0  

    Default

    Ok, I get it. But how can I get the active list of the nestedList to refresh it ?

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Vote Rating
    1525
      0  

    Default

    All NestedList is is a Container using card layout so the active list is the active item.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    72
    Vote Rating
    3
      0  

    Default

    I think what I did is right but it still doesn't work, could you take a quick look at it

    I have a button that do this :

    Code:
    handler : function(){
                var tb = this.nestedList.getDockedComponent('documentToolsToolbar');
                if(tb.isHidden()){
                    app.documentTpl = 1;
                    this.nestedList.getItemTextTpl();
                    this.nestedList.getActiveItem().refresh();
                    tb.show();
                }
                else{
                    app.documentTpl = 0;
                    this.nestedList.getItemTextTpl();
                    this.nestedList.getActiveItem().refresh();
                    tb.hide();
                }
                                          
                this.nestedList.doLayout();
                this.nestedList.doComponentLayout();
            }
    And then I have this in my nestedList :

    Code:
    getItemTextTpl: function(node){
    var tpl = '<table height="40px" border="0">'+
                            '<tr>'+
    '<td style="vertical-align:middle;padding-left:5px;padding-right:5px;">'+
    '<div class="nestedDefault {iconCls}"></div>'+
                              '</td>'+
    '<td class="file-name" style="vertical-align:middle">';
                                             
                if(app.documentTpl == 1){
                    tpl += 'TPL1 : {text}';
                }else{
                    tpl += 'TPL0 {text}';
                }
                                             
                tpl += '</td></tr></table>';
                console.log("nestedlist : "+this.id);
                return tpl;
            }
    What's wrong with this code ?

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Vote Rating
    1525
      0  

    Default

    You're not doing anything when you execute getItemTextTpl.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    72
    Vote Rating
    3
      0  

    Default

    So how should I change the tpl of the nestedlist items then ?

Tags for this Thread

Posting Permissions

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