Results 1 to 6 of 6

Thread: Calling custom functions in XTemplate

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    1
      0  

    Default Answered: Calling custom functions in XTemplate

    I've defined a custom function in an XTemplate, but when the page loads, I see:
    Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'calcDuration' of undefined

    My template is included below. What needs to be done to reference the function in the template? (Note: this template is in an object applied to a parent class. I'm not sure if that matters. The rest of the information is displayed correctly as long as I don't include the duration function.

    Code:
                itemTpl : new Ext.XTemplate([
                    '<tpl for=".">',
                    '<div class="formBody meeting">',
                    '    <div class="label">Name</div>',
                    '    <div class="field">{meetingName}</div>',
                    '    <div class="label meetingDate">Date</div>',
                    '    <div class="label meetingStartTime">Start Time</div>',
                    '    <div class="label meetingDuration">Duration (optional)</div>',
                    '    <div class="field meetingDate">{meetingDate}</div>',
                    '    <div class="field meetingStartTime">{meetingStartTime}</div>',
                    '    <div class="field meetingDuration">',
                    '        { [this.calcDuration(values.meetingStartTime, values.meetingEndTime)] }',
                    '    </div>',
                    '    <div class="label">Meeting Location (optional)</div>',
                    '    <div class="field">{meetingLocation}</div>',
                    '    <div class="label">General Information (optional)</div>',
                    '    <div class="field">{comments}</div>',                
                    '</div>',
                    '</tpl>'
                    ].join(''),
                    {
                        calcDuration: function(meetingStartTime, meetingEndTime) {
                            console.log('calcDuration');
                            if (meetingStartTime && meetingEndTime) {
                              /* convert meetingTimes to 24h format */
                             
                             /* subtract meetingStartTime from meetingEndTime */
                                 
                            } else {
                                returnString = '(unspecified)';
                            }
                            return returnString;
                        }
                    })

  2. I had formatted my function call as { [ ] } instead of {[ ]} (note spaces between curly and square braces).

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    Could those curly brackets around calcDuration be causing the problem?

    Try this:
    Code:
    itemTpl : new Ext.XTemplate([
    	'<tpl for=".">',
    	'<div class="formBody meeting">',
    	'    <div class="label">Name</div>',
    	'    <div class="field">{meetingName}</div>',
    	'    <div class="label meetingDate">Date</div>',
    	'    <div class="label meetingStartTime">Start Time</div>',
    	'    <div class="label meetingDuration">Duration (optional)</div>',
    	'    <div class="field meetingDate">{meetingDate}</div>',
    	'    <div class="field meetingStartTime">{meetingStartTime}</div>',
    	'    <div class="field meetingDuration">',
    	'        { [this.calcDuration(values.meetingStartTime, values.meetingEndTime)] }',
    	'    </div>',
    	'    <div class="label">Meeting Location (optional)</div>',
    	'    <div class="field">{meetingLocation}</div>',
    	'    <div class="label">General Information (optional)</div>',
    	'    <div class="field">{comments}</div>',                
    	'</div>',
    	'</tpl>'
    	].join(''),
    	calcDuration: function(meetingStartTime, meetingEndTime) {
    		console.log('calcDuration');
    		if (meetingStartTime && meetingEndTime) {
    		  /* convert meetingTimes to 24h format */
    		 
    		 /* subtract meetingStartTime from meetingEndTime */
    			 
    		} else {
    			returnString = '(unspecified)';
    		}
    		return returnString;
    	}
    )

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    1
      0  

    Default

    without the curly braces, it's not a valid Javascript object.

    Below is the example from Sencha's docs. The syntax: newExt.XTemplate( String... html, [Object config] ) : Object

    So, I could conceivably replace my .join('') with just a paramArray of strings which is nice, but it's the config object that doesn't seem to be working for me.

    Code:
    var tpl =newExt.XTemplate('<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
    '<tpl if="this.isGirl(name)">',
    '<p>Girl: {name} - {age}</p>',
    '<tpl else>',
    '<p>Boy: {name} - {age}</p>',
    '</tpl>',
    '<tpl if="this.isBaby(age)">',
    '<p>{name} is a baby!</p>',
    '</tpl>',
    '</tpl></p>',
    {
        // XTemplate configuration:        disableFormats:true,
        // member functions: 
        isGirl:function(name){
            return name =='Sara Grace';
        },
        isBaby:function(age){
            return age <1;
       }
    });
    

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    1
      0  

    Default Console output and object inspection

    Here's the console output along with some interactive poking about:

    • [COLOR=red !important][/COLOR]
    • [COLOR=red !important][/COLOR]
    • [COLOR=red !important]Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'calcDuration' of undefined Console.js:17[/COLOR]

    Ext.getCmp('meetingView').items.items[0].getItemTpl()

    Ext.apply.create.Class

    • calcDuration: function (meetingStartTime, meetingEndTime) {
      • arguments: null
      • caller: null
      • length: 2
      • name: ""
      • prototype: Object
      • __proto__: function Empty() {}
    • fn: function (out,values,parent,xindex,xcount) {
    • html: "<tpl for="."><div class="formBody meeting"> <div class="label">Name</div> <div class="field">{meetingName}</div> <div class="label meetingDate">Date</div> <div class="label meetingStartTime">Start Time</div> <div class="label meetingDuration">Duration (optional)</div> <div class="field meetingDate">{meetingDate}</div> <div class="field meetingStartTime">{meetingStartTime}</div> <div class="field meetingDuration"> { [this.calcDuration(values.meetingStartTime, values.meetingEndTime)] } </div> <div class="label">Meeting Location (optional)</div> <div class="field">{meetingLocation}</div> <div class="label">General Information (optional)</div> <div class="field">{comments}</div></div></tpl>"
    • initialConfig: Object
    • __proto__: TemplateClass


  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    1
      0  

    Default Solved it:

    I had formatted my function call as { [ ] } instead of {[ ]} (note spaces between curly and square braces).

  7. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    17
    Vote Rating
    0
      0  

    Default

    Thanks! Man, I have solved the same error.

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
  •