Question

我正在寻找EXTJS4组合框控制，它允许通过里面的复选框选择多个项目。

实际上我需要这个控件http://lovcombo.extjs.eu/但它是为ExtJs3实现的。我试图将它转换为ExtJs4，但实际上这项任务并非微不足道。

你能为ExtJs4建议类似的组件吗？或许你可以指点我一些教程或例子 - 如何做这些事情？

Answer 1

使用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>';
            }
        }
    });

[下面是此自定义组件的图像]
enter image description here

Answer 2

使用此：http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox

enter image description here

或者：http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

- 在combox中使用checkboxselectmodel的网格

ExtJs 4组合框与复选框

2 个答案: