ExtJs 4 combobox with checkboxes

问题

I'm looking for EXTJS4 combobox control which allows selecting multiple items via checkboxes inside.

Actually I need this control http://lovcombo.extjs.eu/ but it is implemented for ExtJs3. I tried to convert it to ExtJs4 but the task is not trivial actually.

Could you suggest similar component for ExtJs4. Or maybe you could point me to some tutorial or example - how to do such things?

回答1:

Multiselect combo with checkbox in ExtJS4.0 can be achieved with addition few lines of code.

Basically you need to make use of the existing css class which get applied during selection and deselection of an item and pushing an image (checkbox image) at that time accordingly.

"x-boundlist-item" and "x-boundlist-selected" are the classes taken from ext-all.css.

<style>

.x-boundlist-item img.chkCombo {
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif);
}
.x-boundlist-selected img.chkCombo{
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif);
}

</style>
<head>

Ext.create('Ext.form.ComboBox', {
        id: 'BCCAddress',
        name: 'BCCAddress',
        maxHeight: 150,        
        width: 210,
        multiSelect: true,
        emptyText : "Select Bcc email addresses",
        renderTo: 'extBCCAddress',
        store: myArrayStore,
        displayField: 'fieldName',
        valueField: 'fieldName',
        forceSelection: true,
        editable: false,
        mode: 'local',
        triggerAction: 'all',
        listConfig : {          
            getInnerTpl : function() {
                return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
            }
        }
    });

[below is an image of this custom component]