Style an Ext.Template depending on value

[olagunnarsson]

Hi,

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>',
"</td>"
);...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.

//Ola

[AndreaCammarata]

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>',
'<tpl if="value > 5">',
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} redkText>',
'</tpl>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
"</td>"
);
Hope this helps.

[olagunnarsson]

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
Ola

[AndreaCammarata]

No problem ;).
You are welcome.