PDA

View Full Version : Combo box display text



simon
10 Oct 2013, 2:26 AM
I would like to set display field of combo box (selected item).
So, i use calculated field in my record:



{ name: 'display', convert: function (v, rec) {
return '<font color="'+rec["color"]+'>' + rec["name"]+'</font>';
}


Then I have set the dispayFiled in my combo box to this column:


var cmbDc = new Ext.form.ComboBox({displayField: 'display',..});


It works except the HTML is ignored - it is written as text instead of the font would have the appropriate color. How can I do that? I have tried also with select event, but it is the same:


'select': function (combo, record) {
var text ='<font color="red">'+record.data['name']+'</font>';
Ext.form.ComboBox.superclass.setValue.call(this, text);


Any idea?

willigogs
10 Oct 2013, 4:41 AM
You would need to modify the combo's tpl config like below to change the look of the combo when expanded:
http://jsfiddle.net/Whinters/PzVjx/

(http://jsfiddle.net/Whinters/PzVjx/)And update the style/color of the combo element on select to change the look of the collapsed combo:
http://jsfiddle.net/Whinters/PzVjx/1/

simon
10 Oct 2013, 11:42 PM
Thank you for your answer.
But tpl config is for collapsed items? That i have already done and it works.
When you select some item in combo it is shown in textbox at the top of the combo.
Here I need to change the look. I need to show font in the color from the record.

In this example:
http://jsfiddle.net/Whinters/PzVjx/

As you see some items are in red color. When you select it, it becomes black, instead of remain red.

willigogs
11 Oct 2013, 12:11 AM
Have you looked at my second provided example? ;)

simon
11 Oct 2013, 1:16 AM
Thank you. It works for the color. My look was too quick :)

But what if I would like that text in selected item is rendered as HTML? Is this possible?

With tpl i can render custom html(like <b>, <li>, <div>,....) but it works only for collapsed items.

Is there some kind of tpl also for selected item?

I guess this would work:

combo.getEl().insertHtml()

Otherwise I need just color at the moment and it helped me to solve my problem :)