checkboxes inside my combo refuse to show

checkboxes inside my combo refuse to show

I follow this example located here (ExtJs 4 combobox with checkboxes) to
make a combo with checkboxes. Everything shows up fine, but the checkboxes
refuse to show even though the css in my firebug shows the righ path to
the checkbox. When I hover over the url on the css window (right bottom
corner of firebug), I even see the checkboxes popped up.
Here is my combo code:
getInstructorSubstituteUi: function() {
return {
xtype: 'combo',
store:
Ext.create('Iip.store.giips.schedule.Instructors').load({params:
{c: 'get_instructors'}}),
fieldLabel: 'Instructor Substitute',
queryMode: 'local',
displayField: 'instructorName',
valueField: 'userInfoId',
itemId: 'instructorSubstitute',
name: 'instructorSubstitute',
multiSelect: true,
forceSelection: true,
lastQuery: '',
margin: '10 0 0 25',
allowBlank: false ,
triggerAction: 'all',
listConfig: {
getInnerTpl: function(displayField) {
console.log(this.getNode());
console.log(displayField);
return '<div class="x-combo-list-item"><img src="' +
Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon
chkCombo" />{instructorName}</div>';
}
}
};
},
Here is css in the head section of my index.html:
<style>

| ~
.x-boundlist-item img.chkCombo {

| ~
background: transparent

| ~
url(lib/extjs/resources/themes/images/default/menu/unchecked.gif);

| ~
}

| ~
.x-boundlist-selected img.chkCombo{

| ~
background: transparent

| ~
url(lib/extjs/resources/themes/images/default/menu/checked.gif);

| ~
}

| ~
</style>
However, when I replace Ext.BLANK_IMAGE_URL with the url to the unchecked
box, it shows up. Looks like the blank url cannot dynamically replaced.
Just my guess.
Please tell me what I did wrong?