PDA

View Full Version : XTemplate selector



hazimdikenli
15 Feb 2011, 11:36 PM
Hello,
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 should look like:


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 <tpl if > blocks it might grow big and complicated so I wanted some opinions before I dive into it.

arthurakay
16 Feb 2011, 6:40 AM
I have never seen XTemplates used like that... not that it can't be done, but it sounds like a lot of work.

Why not use a GridPanel(), and output the rows using XTemplates? On your Column config, use the "renderer" property to do the logical operations, then call the appropriate XTemplate to output the display for each row.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.Column

hazimdikenli
16 Feb 2011, 8:32 AM
that makes sense, I needed something like Renderer to pickup the template but DataView does not have it, using GridPanel makes more sense for this, thanks:)