Calling custom functions in XTemplate

[dshookowsky]

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.

            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;
                    }
                })

[jerome76]

Could those curly brackets around calcDuration be causing the problem?

Try this:

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;
	}
)

[dshookowsky]

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.

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;
   }
});

[dshookowsky]

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

[dshookowsky]

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

[romanyu]

Thanks! Man, I have solved the same error.