ExtJs 4 combobox with checkboxes

后端未结

关注

 2  2093

长情又很酷

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 i

相关标签:

2条回答

情话喂你

2021-02-04 15:51

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

0 讨论(0)

盖世英雄少女心

2021-02-04 16:10
1. use this: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox
1. or this: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList
-- use grid with checkboxselectmodel in combox
0 讨论(0)
发布评论:

提交评论
- 加载中...