写一个EXT 下拉多选 搜索 组件

好的，以下是一个EXT下拉多选搜索组件的示例代码：

Ext.define('MyApp.view.MultiSelectCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.multiselectcombo',

    multiSelect: true,
    queryMode: 'local',
    triggerAction: 'all',

    initComponent: function() {
        Ext.apply(this, {
            tpl: '<tpl for=".">' +
                '<div class="x-boundlist-item">' +
                '<input type="checkbox" <tpl if="checked">checked="checked"</tpl>>{text}' +
                '</div>' +
                '</tpl>',

            displayTpl: '<tpl for=".">' +
                '{[values.checked ? values.text + "," : ""]}' +
                '</tpl>'
        });

        this.callParent();
    },

    createPicker: function() {
        var me = this,
            picker = me.callParent(arguments);

        picker.on({
            itemclick: me.onItemClick,
            beforeitemclick: me.onBeforeItemClick,
            scope: me
        });

        return picker;
    },

    onItemClick: function() {
        var me = this,
            picker = me.picker,
            valueField = picker.valueField,
            displayField = picker.displayField,
            selectedRecords = picker.getSelectionModel().getSelection(),
            value = [],
            display = [];

        Ext.each(selectedRecords, function(rec) {
            value.push(rec.get(valueField));
            display.push(rec.get(displayField));
        });

        me.setValue(value);
        me.setRawValue(display.join(', '));
    },

    onBeforeItemClick: function(view, record, item, index, e) {
        var me = this,
            checked = !record.get('checked');

        record.set('checked', checked);
        return false;
    }
});

这个组件继承自Ext.form.field.ComboBox，并添加了一些自定义的配置选项，如multiSelect、tpl和displayTpl。

在initComponent方法中，我们定义了一个自定义的模板，用于渲染下拉列表项。模板中包含一个复选框和一个文本标签，文本标签显示下拉列表项的文本。如果下拉列表项被选中，则复选框被选中。

在createPicker方法中，我们添加了一个itemclick事件处理程序，用于更新组件的值和显示文本。我们还添加了一个beforeitemclick事件处理程序，用于阻止默认的选择行为，并更新下拉列表项的选中状态。

使用时，您可以将这个组件添加到您的表单中，并设置数据源和其他必要的配置选项。例如：

{
    xtype: 'multiselectcombo',
    fieldLabel: '选择项',
    name: 'items',
    store: Ext.create('Ext.data.Store', {
        fields: ['value', 'text'],
        data: [
            {value: '1', text: '选项1'},
            {value: '2', text: '选项2'},
            {value: '3', text: '选项3'},
            {value: '4', text: '选项4'},
            {value: '5', text: '选项5'}
        ]
    })
}

这将创建一个下拉多选搜索框，其中包含5个选项，并将选中的值存储在名为“items”的表单字段中。