Extjs combobox displaying square bullet in dropdown list

Question

Here is the config for creating the combobox:

{
    xtype: 'combobox',
    id: 'state',
    fieldLabel: 'State',
    displayField: 'name',
    valueField: 'abbr',
    store: states,
    typeAhead: true,
    labelWidth: 35,
    padding: '0 10 0 0'
}

The dropdown list display a square bullet infront of the the text - which I do not want and the highlight when scrolling the list does not highlight the entire line instead the space before the bullet and the bullet and first letter are not highlighted. I am using the ext-all-gray.css. I assume I need to override a style but have not been able to figure that out. Thanks.

What is containing the combobox? Can you make a quick jsfiddle showing the issue? — Michael Dillon

user1480815 user1480815 · Accepted Answer · 2012-07-19T16:07:23

I found the solution - create a new template and use the extjs class for the selector:

 tpl: '<div><tpl for="."><div class="x-boundlist-item">{name}</div></tpl></div>',
 itemSelector: 'div.x-boundlist-item',

Extjs combobox displaying square bullet in dropdown list

1 Answers