Custom CSS (.x-boundlist-item) override in ExtJS combobox

[Ronits]

Hi,
I am trying to implement multiSelect combobx with checkbox selection. PFB the snapshot :

Attachment 41332

I have used

listConfig : {        baseCls: 'z-myboundlist'
    },

in combobox. And in ext-all.css, have put

.z-myboundlist-selected { }

to modify css and place the checked image of checkbox in background, when that particular combo box list is selected. It is working fine as you can see the checkbox checked in the above diagram.

However, what I need is an unchecked checkbox image in the remaining list items within the combo box. I added

.z-myboundlist-item {}

in ext-all.css, but it is not working.

When I do an inspect element in the combo box list items, I get this :

<li role="option" class="x-boundlist-item">South Korea</li>

I want to know, why ''.z-myboundlist-item' is not getting added in class, and still 'x-boundlist-item'is being shown.

I cannot add the unchecked chekbox image in x-boundlist-item class, since it will be added in all the combo box instances in the page. I want it to be specific to a single specific combo box.

Please help.

[mitchellsimoens]

First, you shouldn't edit any CSS or JS file that comes with the framework. You should only use your application files.

To specify what class is on each list item then you should use the itemCls config instead of the baseCls config.

[Ronits]

Ok. Thanks for the information.
I did not find itemCls config for combobox. How shall I implement the same. Any demo/code ?

[slemmon]

Combobox's drop down is an instance of an Ext.view.BoundList. You can set configs for a combobox's drop down using its listConfig.
The itemCls can be be configured there.

listConfig: {
    itemCls: 'my-item-cls'
    // ... any other boundList configs
}