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 回答