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

---

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

---

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


---

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

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

Thanks! Man, I have solved the same error.