ExtJS XTemplate

Question

私はExtJSを使用してFilterEditorを開発しようとしています。 ユーザーはいくつかの範囲、比較、null/notnullの基準を作成し、ユーザーは全体的な基準を簡単に読むことができるように、適切な形式の形式で提示する必要があります。

このため、私はExt.DataViewとXTemplatesを使ってこのトリックを行いました。しかし、テンプレートをメンテナンス可能にするために複数のテンプレートを提供できるかどうか、またはテンプレートの一部を選択するための組み込み機能をいくつか使用することができますか？

var dateRangeTpl = new Ext.XTemplate(
    '<tpl for=".">', 
     '<div id="{CriteriaId}">', 
      '<em>{FieldName} </em>', 
      '<span>{Modifier} </span>', 
      '<span>{Condition} </span>', 
      '<span>{LeftDate} </span>', 
      '<span>{RightDate} </span>', 
     '</div>', 
    '</tpl>', 
    '<div class="x-clear"></div>' 

    var notNullTpl = new Ext.XTemplate(
    '<tpl for=".">', 
     '<div id="{CriteriaId}">', 
      '<em>{FieldName} </em>', 
      '<span>{Modifier} </span>', 
      '<span>{Condition} </span>', 
     '</div>', 
    '</tpl>', 
    '<div class="x-clear"></div>' 

出力：

Invoice Date not between 2011-01-01 2011-01-31 
Invoice Date not null 

テンプレートがたくさんあるでしょう、私はいくつかのインラインデータエディタを提供することを考えていますので、おそらくこれは数字で成長します。私はそれが大きく複雑になるかもしれないいくつかの単純なブロックを行うことができることを知っているので、私はそれに潜入する前にいくつかの意見が欲しかった。

Answer 1

テンプレートの中で最も強力なのは、テンプレート内で呼び出せるテンプレートメンバー関数だと思います。これらの可能性は無限です。たとえば、あなたのメインテンプレート内の他のサブテンプレートをレンダリングするためにそれらを使用することができます。

var mainTpl = new Ext.XTemplate(
    '<tpl for=".">', 
    '<div class="container">', 
     '{[this.renderItem(values)]}', 
    '</div>', 
    '</tpl>', 
    { 
    renderItem: function(values) { 
     if (values instanceof DateRange) { 
     return dateRangeTpl.apply(values); 
     } 
     else { 
     return notNullTpl.apply(values); 
     } 
    } 
    } 
); 

テンプレートの偉大な概要については煎茶の会議ビデオをチェックアウト：Advanced Templates for Ext JS。

Answer 2

テンプレートもグリッド上の行エキスパンダーです。

私のプロジェクトで使用した以下のコードを見つけてください。

 
 
    this.expander = new Ext.grid.RowExpander({ 
 
    tpl : new Wtf.XTemplate(
 
    '<table border="0" class="iemediumtablewidth" >', 
 
    '<tr>', 
 
    '<td class="iedaynametd" width="200">', 
 
    '<table border="0">', 
 
    '<tr align="center">', 
 
    '<th><b>'+values+'</b></th>', 
 
    '</tr>', 
 
    '<tpl for="dayname">', 
 
    '<tr align="left">', 
 
    '<td>', 
 
    '{.}', 
 
    '</td>', 
 
    '</tr>', 
 
    '</tpl>', 
 
    '</table>', 
 
    '</td>', 
 
    
 
)};