Question

I’m trying to create a condition inside a tooltip template.

I’ve declared my template like this:

    tooltipTpl: new Ext.XTemplate(
    '<tpl for=".">',
        '<dl class="eventTip">',
        '<tpl if="values.getLength() == 1">',
            '<dt class="icon-clock">Time</dt><dd>{[Ext.Date.format(values.start, "d-m")]} - {[Ext.Date.format(Ext.Date.add(values.end,Ext.Date.SECOND,-1), "d-m")]}</dd>',
        '</tpl>',
        '<tpl if="values.getLength() &gt; 1">',
            '<dt class="icon-clock">Day</dt><dd>{[Ext.Date.format(values.start, "d-m")]}</dd>',
        '</tpl>',
        '<dt class="icon-task">Status</dt><dd>{Name}</dd>',
        '</dl>',
    '</tpl>'
        ).compile(),

The idea behind is to be able to display 2 dates (start and end) if event is longer than 1 day, if it is one day event just display that date.

I’ve declared my model as so:

Ext.define('Urlopy.Model.Plan', {
        extend : 'Sch.model.Event',
        idProperty : 'id',
        resourceIdField : 'userID',
        startDateField  : 'start',
        endDateField    : 'end',
        fields : [{ name : 'id', type : 'int'}, 
                  { name : 'userID', type : 'string'},
                  { name : 'start', type : 'date',  dateFormat : 'MS'},
                  { name : 'end', type : 'date',    dateFormat : 'MS'},
                  { name : 'Name'}],
        getLength : function() {
            return Sch.util.Date.getDurationInDays(this.get('start'), this.get('end'));
        }
    });

The second line of my tooltip is displayed, but line with dates isn’t. It looks like I cant call function from my model in my template.

How to fix this? Is it possible?

Answer 1

The answer to the question – if it is possible to run function from the object passed to the template as a data object, yes. The function will be called.

You can run the following short snippet of code inside the any browser console like FireBug
(of course you need to open the console at the page which has extjs, simple open console on the extjs documentation page) to see it.

Code snippet:

var t = new Ext.XTemplate(
    '<tpl for=".">',
      '\n===',
          '<tpl if="values.getLength() == 1"> ONE </tpl>',
          '<tpl if="values.getLength() &gt; 1"> TWO </tpl>',
          ' *{name}* ',
      '===',
    '</tpl>'
).compile();

var a = [
    {name: 'Foo', getLength: function() {return 1;} },
    {name: 'Boo'}
];

var s = t.apply(a);
console.log(s);

You will see the following results:

return 1:

=== ONE *Foo* === 
=== *Boo* ===

return > 1:

=== TWO *Foo* === 
=== *Boo* ===

I don’t know the context of using this template with the underlying model, you are not provided code applying the model to the template. But I’m pretty sure that to the template is going the model data but not the whole model object, that is why you can see the second line with modal’s field {Name}.

To overcome it you can add to the template its own method, like:

//for the simplicity sake I've not pasted the whole template
//also you can call the *this.getLength(values.start, values.end)* 
//and change this method parameters 
var tooltipTpl = new Ext.XTemplate(
  '<tpl for=".">',
  // ... 
    '<tpl if="this.getLength(values) &gt; 1">',
  // ...            
    '</tpl>',
  // ...
  '</tpl>'
,{
  getLength : function(data) {
    //move the model method to the template
    return Sch.util.Date.getDurationInDays(data.start, data.end);  
  }
}).compile();