Extjs4 工具提示中的ExtJS 4.1条件

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

我这样声明了我的模板：

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

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

---

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

问题的答案-如果可以从作为数据对象传递给模板的对象运行函数，则为“是”。将调用该函数

您可以在任何浏览器控制台（如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：

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

我不知道将此模板与基础模型一起使用的上下文，没有为您提供将模型应用于模板的代码。但是我很确定模板中的数据是模型数据，而不是整个模型对象，这就是为什么您可以看到第二行的modal字段{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();

//为了简单起见，我没有粘贴整个模板
//还可以调用*this.getLength（values.start，values.end）*
//并更改此方法的参数
var tooltipTpl=new Ext.XTemplate(
'',
// ... 
'',
// ...            
'',
// ...
''
,{
getLength:函数（数据）{
//将模型方法移动到模板中
返回Sch.util.Date.getDurationDays（data.start，data.end）；
}
}).compile（）；

您可以使用模型的方法

定义模型静态方法：

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

“”

---

因此，您可以删除模板的方法。

谢谢您的帮助，我会立即检查。我正在Ext Scheduler组件中使用此模板。这是基于网格的（我想是：P），如果它有效或者我还有问题，我会回信。向模板添加函数有帮助，我正在联系调度器作者，了解如何从模型调用函数，这样会更好，由于模型和工具提示中的代码重复。请注意，在静态方法中，

这实际上是类/构造函数引用
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">'