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

背后的想法是，如果事件超过1天，则能够显示2个日期（开始和结束），如果是一天事件只显示该日期。

我已经宣布我的模型如此：

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* ===

返回＆gt; 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">'

所以你可以删除模板的方法。

工具提示中的ExtJS 4.1条件

2 个答案: