ビューに出力されるテキストに対して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行目の連結は違法です。
それが可能かどうか、またはこれを正しく行う方法を知っていますか?
これで問題が解決するはずです。
'<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,
...
これは、以下のコードと同様に正常に機能するはずです(上記のXTemplateからコードを挿入するだけです)。
itemTpl: new XTemplate(...),
これがそれを整理することを願っています!
editは、終了タグを見逃していることに気づきました。終了タグがなくても機能する場合もありますが、興味深いエラーが発生する可能性があるため、常に使用することをお勧めします(この場合、生成されたコードにブラケットがありません)。
注:以下の例は期待どおりに機能しません! zelexir答えを見てください!
メンバー関数を使用できます
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);
}
}
]
テンプレート内で関数を使用できます
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);
}
}
]