ExtJs 4组合框与复选框 [英] ExtJs 4 combobox with checkboxes
问题描述
我在寻找EXTJS4组合框控件，允许通过内部的复选框选择多个项目。
I'm looking for EXTJS4 combobox control which allows selecting multiple items via checkboxes inside.
其实我需要这个控制 http://lovcombo.extjs.eu/但它是为ExtJs3实现的。我尝试将其转换为ExtJs4，但任务并不是微不足道的。
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.
您可以为ExtJs4建议类似的组件。
Could you suggest similar component for ExtJs4. Or maybe you could point me to some tutorial or example - how to do such things?
推荐答案
在ExtJS4中使用复选框进行多选组合。 0可以实现加几行代码。
Multiselect combo with checkbox in ExtJS4.0 can be achieved with addition few lines of code.
基本上，您需要利用现有的css类，在选择和取消选择项目期间应用它，并且相应地推送图像（复选框图像）。
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 和 x-boundlist-selected < all.css。
"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]
这篇关于ExtJs 4组合框与复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
