PDA

View Full Version : Format ComboBox entries depending on value



jesjimher
5 Apr 2011, 12:03 AM
Hi

I would like to apply differents formats to ComboBox entries depending on their value. For example, showing negative numbers in red, or very big values in bold.

I've looked throughout the docs and the forum, and I haven't found any solution. Changing tpl doesn't work for me (I would need different tpls for each class of values), and there doesn't seem to exist anything similar to the getRowClass() method that exist in Grids.

I think it has to be something related to the combo's inner DataView, but I haven't managed work it out. Any help?

Thanks a lot in advance!

mitchellsimoens
5 Apr 2011, 8:52 AM
The tpl will be what you want to change. XTemplates can accept programatic things like if statements and functions. Sencha Touch and ExtJS4's docs have great examples:


var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);


var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
// use opposite if statement to simulate 'else' processing:
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>',
{
// XTemplate configuration:
compiled: true,
// member functions:
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
}
);

A good hint for your case is in red!

jesjimher
8 Apr 2011, 12:18 AM
Thanks a lot, it worked like a charm! I didn't know XTemplates were so configurable!