ExtJS XTemplate

Question

我正在尝试使用ExtJS开发一个FilterEditor。用户创建了一些范围，比较，空/非空标准，我需要以格式良好的格式呈现它们，以便用户可以轻松阅读整体标准。

为此，我认为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会议视频：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>',
  
  )};

​