Javascript extjsxtemplate

我正在尝试使用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>'

---

将会有很多模板，我正在考虑提供一些内联数据编辑器，所以这很可能会增加数量。我知道我可以做一些简单的块，它可能会变得很大和复杂，所以在深入研究之前我想听听一些意见。

我认为模板最强大的方面是可以在模板中调用的模板成员函数。有了这些，可能性是无穷的。例如，您可以使用它们渲染主模板中的其他子模板：

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

var mainTpl=new Ext.XTemplate(
'',
'',
“{[this.renderItem（values）]}”，
'',
'',
{
renderItem：函数（值）{
if（值instanceof DateRange）{
返回日期范围tpl.apply（值）；
}
否则{
返回notNullTpl.apply（值）；
}
}
}
);

---

有关模板的详细概述，请查看Sencha会议视频：。

模板也位于网格上的行扩展器中

请找到下面的代码，我在我的项目中使用。

this.expander=new Ext.grid.RowExpander({
第三方物流：新Wtf.XTemplate(
'',
'',
'',
'',
'',
''+值+''，
'',
'',
'',
'',
'{.}',
'',
'',
'',
'',
'',
)}所以这个解决方案建议我们可以在templates:）中使用模板，这是非常强大的。另一个建议是使用GridPanel而不是DataView，并使用renderer函数在render函数中应用正确的模板。
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);
      }
    }
  }
);