How can I change the ComboBox trigger to show a search icon?

Question

The ComboBox component shows a dropdown icon for the trigger. How can I show a search icon instead? I am using ExtJS 3.X.

Answer 1

You can use the triggerClass config. I found a class x-form-search-trigger that seems to work. Here is a simple example:

new Ext.form.FormPanel({
    items: [{
        xtype: 'combo',
        fieldLabel: 'Color',
        mode: 'local',
        triggerAction: 'all',
        displayField: 'text',
        valueField: 'value',
        triggerClass: 'x-form-search-trigger',
        store: new Ext.data.JsonStore({
            data: [
                { text: 'Green', value: '1' },
                { text: 'Blue', value: '2' },
                { text: 'Red', value: '3' },
            ],
            fields: [ 'text', 'value' ]
        })
    }],
    renderTo: Ext.getBody()
});