TAGS :Viewed: 4 - Published at: a few seconds ago

[ ExtJs ComboBox: style entries ]

i would like to make some of my entries in a Combobox italic.

Is there something like the renderer of a Column or how can i achive this?

Edit: Sorry but i didn't provide enough information, and i'm realizing that this is nonsense what i wanted do before...

I will write some more words to this atfter i completely understand my problem...

Answer 1


If you just want to style the list items itself it's sufficient to provide a getInnerTpl() function for the internal bound list used in the dropdown:

var combo = new Ext.form.field.ComboBox({
    // ...
    listConfig: {
        getInnerTpl: function() {
            return '{field1}: {field2}';
        }
    },
    // ...
});

If you'd like to change the whole content of the dropdown, provide a tpl parameter in the listConfig:

var combo = new Ext.form.field.ComboBox({
    // ...
    listConfig: {
        tpl: '<div><tpl for="."><span class="item">{field1}: {field2}</span></tpl></div>',
        itemSelector: 'span.item' // you need to provide an itemSelector if you change the template
    },
    // ...
});

As Tanel Tähepõld suggested, you should read the documentation for Ext.XTemplate.

Answer 2


Ext.form.field.ComboBox has config property "renderTpl", you can create your own Ext.XTemplate and use it (html markup). XTemplate also allows to use if caluses inside template so you can create if caluse for italic text. Doc for Ext.XTemplate: http://docs.sencha.com/ext-js/4-0/#/api/Ext.XTemplate