1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    0
    dshookowsky is an unknown quantity at this point

      -1  

    Default Answered: Calling custom functions in XTemplate

    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,137
    Answers
    131
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      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
    0
    dshookowsky is an unknown quantity at this point

      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
    0
    dshookowsky is an unknown quantity at this point

      0  

    Default Console output and object inspection

    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
    0
    dshookowsky is an unknown quantity at this point

      0  

    Default Solved it:

    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
    romanyu is on a distinguished road

      0  

    Default


    Thanks! Man, I have solved the same error.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar