Условие ExtJS 4.1 в tooltip

Question

Я пытаюсь создать условие внутри шаблона всплывающей подсказки.

Я объявил мой шаблон, как это:

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(), 

Идея должна быть в состоянии отображать 2 даты (начало и конец), если событие больше, чем 1 день, если это один день событие просто покажите эту дату.

Я объявил свою модель как так:

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

Отображается вторая линия моей подсказки, но линия с датами нет. Похоже, я не могу вызвать функцию вызова из моей модели в своем шаблоне.

Как это исправить? Является ли это возможным?

Answer 1

Ответ на вопрос - если можно запустить функцию из объекта, переданного шаблону в качестве объекта данных, да. Вызывается функция.

Вы можете запустить следующий короткий фрагмент кода внутри любой консоли браузера, такой как FireBug (конечно, вам нужно открыть консоль на странице с extjs, простой открытой консолью на странице документации extjs), чтобы увидеть ее.

Фрагмент кода:

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

Вы увидите следующие результаты:

возвращение 1:

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

возвращение> 1:

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

Я не знать контексте использования этого шаблона с базовой моделью, вам не предоставляется код, применяющий модель к шаблону. Но я уверен, что к шаблону идут данные модели, но не весь объект модели, поэтому вы можете увидеть вторую строку с полем модала {Name}.

Чтобы преодолеть его, вы можете добавить в шаблон свой собственный метод, как:

//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(); 

Answer 2

Вы можете использовать метод в модели ..

Определение модели статический метод:

Ext.define('Urlopy.Model.Plan', { 
//... 

static: { 
    getLength: function(data) { 
     console.log('data', data); 
     console.log(data.start, data.end); 
     return 5; //just test function 

    } 
} 

//..... 
}); 

Используйте его в шаблоне:

'<tpl if="Urlopy.Model.Plan.getLength(values) == 1">' 

Таким образом, вы можете удалить метод шаблона.