CODEWITHSUNDEEP
javascriptjspextjs
Mok
Mok

Reputation: 287

Ext-Js how to modify Combo box display for selection

In my selection model items can be strings, integers or html data. Like "Testing", "1234" or "".

When the item is in html , my selection model is rendering html, I am not sure how to avoid it. Selected item

Shown while selecting

THank you PS: I am currently using EXT JS 3.4

Upvotes: 1

Views: 2888

Answers (1)

Akatum
Akatum

Reputation: 4016

You can create your own template and use it for display each item in the dropdown list.

Ext.form.ComboBox component have tpl config property where you can set template string, or Ext.XTemplate instance to use to display each item in the dropdown list.

In this template you can encode HTML in display values.

For encoding HTML in Ext JS you can use Ext.util.Format.htmlEncode() function.

var tpl = new Ext.XTemplate(
'<tpl for=".">',
    '<div class="x-combo-list-item">{[fm.htmlEncode(values.displayText)]}</div>',
'</tpl>'
);

var combo = new Ext.form.ComboBox({
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, '<b>item1</b>'], [2, '<i>item2<i>']]
    }),
    renderTo: Ext.getBody(),
    valueField: 'myId',
    displayField: 'displayText',
    tpl: tpl  
});

Upvotes: 1

Related Questions