1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    9
    Vote Rating
    0
    besimo is on a distinguished road

      0  

    Default Unanswered: Dynamic XTemplate

    Unanswered: Dynamic XTemplate


    Hi all,

    I want to have a dynamic template and using an XTemplate.

    The template of my Container is the following:
    Code:
    <tpl for=".">    
          {[this.changeTemplateBasedOnType(showAssignForType)]}
    </tpl>
    And I want to return the a whole HTML structure. This is the
    changeTemplateBasedOnType function:
    Code:
    var returnStringif(type==='person') {
        
        returnString = '<div class="detail_container">' +
                '<div class="pers_det_image"> <img src="{IMGURL}" width="200px" height="200px" /></div>' +
                '<div class="person_text_container">' +
                '<div class="pers_det_name">{NAME}</div>' +
                '<div class="pers_det_lastname">{LASTNAME}</div>' +
                '<div class="spacer"></div>' +
                '<div class="pers_det_bd">{BIRTHDATE}</div>' +
                '<div class="spacer"></div>' +
                '<div class="pers_det_street">{STREET}</div>' +
                '<div class="pers_det_zip">{ZIP}</div>' +
                '<div class="pers_det_country">{COUNTRY}</div>' +
                '<div class="spacer"></div>' +
                '<div class="pers_det_tel">{TEL}</div>' +
                '<div class="pers_det_notes">{NOTES}</div>' +
            '</div>';
        
        return returnString;
            
     
    }
    else if(type==='object') {
        //show other html with other variables then above!!!
    }
    But the output in my App is this:
    2013-01-24_135941.png
    No variables are filled. What am I doing wrong? How can I return a complete HTML structure with the variables?

    Best,
    b.

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    9
    Vote Rating
    0
    besimo is on a distinguished road

      0  

    Default


    Ok, self answering my question
    I have just put the values into the parameter which I can access then in my method

    changeTemplateBasedOnType

    New method definition is now:
    Code:
    <tpl for=".">          {[this.changeTemplateBasedOnType(showAssignForType, values)]}
    </tpl>
    And getting the values into the view:
    Code:
    changeTemplateBasedOnType: function(type, values) {
    var returnString = null;
    if(type==='person') {
        returnString = 
            '<div class="detail_container">' +
                '<div class="pers_det_image"> <img src="' + values.IMGURL + '" width="200px" height="200px" /></div>' +
                '<div class="person_text_container">' +
                    '<div class="pers_det_name">' + values.NAME + '</div>' +
                    '<div class="pers_det_lastname">' + values.LASTNAME + '</div>' +
                    '<div class="spacer"></div>' +
                    '<div class="pers_det_bd">' + values.BIRTHDATE + '</div>' +
                    '<div class="spacer"></div>' +
                    '<div class="pers_det_street">' + values.STREET + '</div>' +
                    '<div class="pers_det_zip">' + values.ZIP + '</div>' +
                    '<div class="pers_det_country">' + values.COUNTRY + '</div>' +
                    '<div class="spacer"></div>' +
                    '<div class="pers_det_tel">' + values.TEL + '</div>' +
                    '<div class="pers_det_notes">' + values.NOTES + '</div>' +
                '</div>' +
             '</div>';
        
        return returnString;
            
     
    }
    else if(type==='object') {
        returnString =
            '<div>' + values.TITLE + '</div>' +
            '<div>' + values.GUID + '</div>' +
            '<div>' + values.ALT_ID + '</div>' +
            '<div>' + values.BASE_CAT + '</div>' +
            '<div>' + values.MISSING + '</div>' +
            '<div>' + values.NOTES + '</div>';
        return returnString;
    }
    }

Tags for this Thread