ExtJs 4组合框与复选框

前端之家收集整理的这篇文章主要介绍了ExtJs 4组合框与复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找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>';
            }
        }
    });

[下面是此自定义组件的图像]

猜你在找的HTML相关文章