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.