0

我正在尝试在工具提示模板中创建一个条件。

我已经像这样声明了我的模板：

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

显示了我的工具提示的第二行，但没有显示日期行。看起来我无法从模板中的模型调用函数。

如何解决这个问题？是否可以？

4

2 回答 2

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();
于 2012-06-22T00:16:30.427 回答
0

您可以使用模型的方法..

定义模型静态方法：

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">'

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

于 2012-06-22T13:55:34.550 回答