我正在寻找EXTJS4组合框控制,它允许通过里面的复选框选择多个项目.
实际上我需要这个控件http://lovcombo.extjs.eu/但它是为ExtJs3实现的.我试图将它转换为ExtJs4,但实际上这项任务并不简单.
你能为ExtJs4推荐类似的组件吗?或许你可以指点我一些教程或例子 – 如何做这些事情?
解决方法
使用ExtJS4.0中的复选框进行多选组合可以通过添加几行代码来实现.
基本上,您需要使用现有的css类,该类在选择和取消选择项目时应用,并在此时推送图像(复选框图像).
“x-boundlist-item”和“x-boundlist-selected”是从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>'; } } });
[下面是此自定义组件的图像]