ExtJS XTemplate

Question

I am trying to develop a FilterEditor using ExtJS. user creates some range, comparison, null/notnull criterias and I need to present them in a well-formatted format, so that users can read the overall criteria easily.

For this, I tought Ext.DataView and XTemplates would do the trick. But I am wondering if I can provide more than one template to makes templates maintainable, or use some built-in functionality to select a piece of the template for me.

   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>'

output:

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

There will be a lot of templates, I am thinking of providing some inline data editors, so most probably this will grow in numbers. I know I can do some simple blocks it might grow big and complicated so I wanted some opinions before I dive into it.

Answer 1

I think the most powerful aspect of templates are template member functions that you can call within your template. With these the possibilities are endless. For example you can use them to render other subtemplates within your main template:

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

For a great overview of templates check out Sencha conference video: Advanced Templates for Ext JS.

Answer 2

Template also in row expander on the grid.

Please find below code , I used in my project.

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