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);
      }
    }
  }
);

有关模板的精彩概述,请查看Sencha会议视频:Ext JS的高级模板.