View Full Version : Style an Ext.Template depending on value

27 Jan 2011, 4:35 AM

I would like to make an Ext.Template, where the style {css} should depend on the {value}.

For example if the {value} exceeds 5 the output will be red otherwise black.

this.cellTpl = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
);...the example above is from the Ext.ux.GroupSummary and it is also there I would like to change the template as I explained.

Does anyone have any suggestions on how to do this?

Thanks in advance.


27 Jan 2011, 11:57 AM
Hi olagunnarsson.
You are posting your issue in the wrong forum.
This is Sencha Touch forum, you should post in Ext Help forum.

However to do what you ask for you should use XTemplate instead Template.
XTemplate in fact, supports conditional processing, so you can write

this.cellTpl = new Ext.XTemplate(
'<tpl if="value <= 5">',
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} blackText>',
'<tpl if="value > 5">',
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} redkText>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
Hope this helps.

28 Jan 2011, 12:03 AM
Ooppss ... ok I'm sorry. Next time I will post in the right Forum.

But anyway thanks for you answer. This was what I was looking for!

Thank you!

Best Regards

28 Jan 2011, 12:46 AM
No problem ;).
You are welcome.