Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 686
Andrey Selitsky Avatar asked Jul 06 '11 18:07

Andrey Selitsky


1 Answers

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]
enter image description here

like image 195
Subrata Nath Avatar answered Oct 06 '22 11:10

Subrata Nath