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?
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]
- use this: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox
- or this: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList
-- use grid with checkboxselectmodel in combox
加载中,请稍侯......
精彩评论