如何調用XTemplate中的函數（itemTpl）

Question

我想對將輸出到視圖的某些文本使用Ext的String方法。

例如：

itemTpl: [ 
    ... 
    '<tpl switch="post_type">', 
    '<tpl case="new_user">', 
     '<p>{post_text_teaser}</p>', 
     '<p>{timestamp}</p>', 
    '<tpl default>', 
     '<p>' + Ext.String.ellipsis(+ '{post_text_teaser}' + \, 4) + '</p>', 
    ... 
].join(''), 

但當然在線路10串聯是非法的。

你知道是否有可能或如何正確地做到這一點？

Answer 1

裏面的函數這應該解決您的問題：

'<tpl switch="post_type">', 
     '<tpl case="new_user">', 
      '<p>{post_text_teaser}</p>', 
      '<p>{timestamp}</p>', 
     '<tpl default>', 
      '<p>{[Ext.String.ellipsis(values.post_text_teaser,4,false)]}</p>', 
    '</tpl>' 

你可以找到更多關於XTemplate的信息在Sencha Docs

模板成員函數的事情是，據我所知，你不能直接在itemTpl中定義它們，但需要明確定義一個新的XTemplate，然後在你的itemTpl中使用它。見例如：

var tpl = new XTemplate(
    '<tpl switch="post_type">', 
     '<tpl case="new_user">', 
      '<p>{post_text_teaser}</p>', 
      '<p>{timestamp}</p>', 
     '<tpl default>', 
      '<p>{[this.shorten(values.post_text_teaser)]}</p>', 
    '</tpl>', 
    {   
     shorten: function(name){ 
      return Ext.String.ellipsis(name,4,false); 
     } 
    } 
); 

... 

itemTpl: tpl, 

... 

Senchafiddle example

將在下面的代碼這應該工作正常（剛從XTemplate插入上面的代碼）。

itemTpl: new XTemplate(...), 

Senchafiddle example

希望這sortens吧！

編輯注意到我哈得錯過了結束標記，有時它的工作原理沒有他們，但它是很好的做法，始終使用它們，因爲它們可能會導致有趣的錯誤（在這種情況下，缺少對所生成的代碼支架）。

Answer 2

Note: The example below does not work as expected! Look at zelexir answer for clarification!

您可以使用memberfunctions

itemTpl: [ 
    ... 
    '<tpl switch="post_type">', 
    '<tpl case="new_user">', 
     '<p>{post_text_teaser}</p>', 
     '<p>{timestamp}</p>', 
    '<tpl default>', 
     '<p>{[this.doAction(post_text_teaser)]}</p>', 
    ..., 
    { 
     // XTemplate configuration: 
     disableFormats: true, 
     // member functions: 
     doAction: function(name){ 
      return Ext.String.ellipsis(name + "\", 4); 
     } 
    } 
] 

Answer 3

您可以使用模板

itemTpl: [ 
    ... 
    '<tpl switch="post_type">', 
    '<tpl case="new_user">', 
     '<p>{post_text_teaser}</p>', 
     '<p>{timestamp}</p>', 
    '<tpl default>', 
     '<p>{[this.concatenate(values.post_text_teaser)]}</p>', 
    ..., 
    { 
     concatenate: function(teaser) { 
       return Ext.String.ellipsis(+ teaser + \, 4); 
     } 
    } 
]