Ext combobox 下拉多选框带搜索功能

ExtJS的combobox组件本身并不支持多选和搜索功能，但是可以通过扩展来实现这些功能。以下是一个基于ExtJS 6.5版本的下拉多选框带搜索功能的示例代码：

Ext.define('MyApp.view.MultiSelectComboBox', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'multiselectcombo',
    
    multiSelect: true,
    delimiter: ',',
    triggerAction: 'all',
    queryMode: 'remote',
    queryParam: 'search',
    minChars: 1,
    
    createPicker: function() {
        var me = this,
            picker,
            menuCls = Ext.baseCSSPrefix + 'menu',
            opts = Ext.apply({
                pickerField: me,
                selModel: {
                    mode: 'SIMPLE'
                },
                floating: true,
                hidden: true,
                ownerCt: me.ownerCt,
                cls: me.el.up('.' + menuCls) ? menuCls : '',
                store: me.store,
                displayField: me.displayField,
                focusOnToFront: false,
                pageSize: me.pageSize
            }, me.listConfig, me.defaultListConfig);

        picker = me.picker = Ext.create('Ext.view.BoundList', opts);
        me.mon(picker.getSelectionModel(), {
            'beforeselect': me.onBeforeSelect,
            'beforedeselect': me.onBeforeDeselect,
            scope: me
        });
        me.mon(picker, {
            itemclick: me.onItemClick,
            refresh: me.onListRefresh,
            scope: me
        });
        me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me);
        return picker;
    },

    initComponent: function() {
        var me = this;
        me.callParent(arguments);
        me.on('change', me.onChange, me);
    },

    onChange: function(combo, newValue, oldValue) {
        var me = this,
            delimiter = me.delimiter,
            values = newValue.split(delimiter),
            store = me.getStore(),
            valueField = me.valueField,
            displayField = me.displayField,
            rec, i, len, value;

        store.clearFilter();
        store.filter(function(record) {
            return Ext.Array.contains(values, record.get(displayField));
        });
        me.setValue(values.join(delimiter));
    },

    onBeforeDeselect: function(list, record) {
        return !this.readOnly;
    },

    onBeforeSelect: function(list, record) {
        return !this.readOnly;
    },

    onItemClick: function(view, record, item, index, e) {
        var me = this,
            delimiter = me.delimiter,
            displayField = me.displayField,
            valueField = me.valueField,
            value = record.get(displayField),
            oldValue = me.getValue(),
            values, index;

        if (!Ext.isDefined(oldValue)) {
            oldValue = '';
        }

        values = oldValue.split(delimiter);
        index = Ext.Array.indexOf(values, value);

        if (index > -1) {
            values.splice(index, 1);
        } else {
            values.push(value);
        }

        me.setValue(values.join(delimiter));
        me.fireEvent('select', me, [record]);
    }
});

这个组件继承自Ext.form.field.ComboBox，并添加了以下属性和方法：

- multiSelect：是否启用多选功能，缺省为false。
- delimiter：多选时使用的分隔符，缺省为逗号。
- createPicker：重写父类的createPicker方法，用于创建下拉框的选择器。这里使用了Ext.view.BoundList组件来实现多选和搜索功能。
- onChange：重写父类的onChange方法，在值改变时更新选择器中选中的项。
- onItemClick：处理选择器中的选项点击事件，实现多选功能。

使用这个组件时，只需将xtype设置为'multiselectcombo'即可，例如：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    items: [{
        xtype: 'multiselectcombo',
        fieldLabel: 'Select',
        name: 'select',
        store: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']
    }]
});

这个示例中，使用了一个简单的字符串数组作为数据源。实际应用中，可以使用Ext.data.Store来加载数据，并设置queryMode为'remote'，通过AJAX请求服务器端进行搜索。