PDA

View Full Version : Custom CSS (.x-boundlist-item) override in ExtJS combobox



Ronits
17 Jan 2013, 2:36 AM
Hi,
I am trying to implement multiSelect combobx with checkbox selection. PFB the snapshot :

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
18 Jan 2013, 2:16 PM
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
19 Jan 2013, 7:06 AM
Ok. Thanks for the information.
I did not find itemCls config for combobox. How shall I implement the same. Any demo/code ?

slemmon
19 Jan 2013, 11:48 AM
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 (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-listConfig).
The itemCls (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.BoundList) can be be configured there.



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