ExtJS XTemplate

Question

Я пытаюсь разработать FilterEditor, используя ExtJS. Пользователь создает некоторый критерий диапазона, сравнения, нулевой / ненулевой, и мне нужно представить их в хорошо отформатированном формате, чтобы пользователи могли легко прочитать общие критерии.

Для этого я решил, что 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 .

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