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 つの日付 (開始日と終了日) を表示できるようにすることです。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'));
        }
    });

ツールチップの 2 行目は表示されますが、日付のある行は表示されません。テンプレートのモデルから関数を呼び出せないようです。

これを修正する方法は？出来ますか？

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} で 2 行目を確認できます。

それを克服するために、次のような独自のメソッドをテンプレートに追加できます。

//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 に答える