How to format combo in extjs?

I have a combo box in ext js , which is dynamically populated. Nothing very complex...and it populates correctly. This is the structure of the display values of the combo:

Name: [dynamicName]
Gender : [dynamicGender]
Age: [dynamicAge]

The objective is to have the Name:, Gender: and Age: inside <b></b> tag. The dynamic values should be in normal text. Let's say I define an array from which i will populate the datastore of the combo. This is the array:

 var arr=[[id1, <b>Name:</b>],[id2, <b>Gender:</b>],[id3, <b>Age:</b>]]

The thing is when i click the dropdown, in the list, they show up proper. As soon as the user selects an option, let's say Name...in the selected option, the formatting goes all wrong. By wrong I mean, the bolded text is not shown. Instead , the string literal <b>Name:</b> dynamicNam开发者_高级运维e is showed.

How can i use tpl syntax to solve this?

---

You can solve this with css. Here is one way:

In the config for the combo box, add:

itemCls: 'make-bold'

(or name this class whatever you want)

Then, in a style sheet, add (using the same name):

.make-bold input {
    font-weight: bold;
}

This will style your input box (what's displayed after you've selected from the combo box) in bold.

---

While the option list is made of <div> elements, thus allowing for styling, the field itself is just an <input> element, and these do not support content styling.

So the answer is: no, you can't.

The extended answer is: I'm pretty sure someone did an alternate implementation of combobox component, that uses different HTML markup and allows for styled content in the field. Try asking on ExtJS forums.

---

I had a similar issue. I want to have a few selections in the combo list bold, but I don't want the HTML markup in the input when the value is selected:

1. Use a Template as this tutorial explains, see Using templates to change the look of combo box items.

Or

2.Use a Select Listner and Regex. You can put a listener on the "select" event and then simply use some regex to strip HTML tags like /<[^>]*>/g to remove HTML tags from input field. Now your HTML used to format the list won't affect the input.