带复选框且支持搜索功能的下拉列表1(1--14)-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3851/article/details/82008230

本文详细介绍了 Ext form MultiComboBox 组件的配置选项与初始化方法。MultiComboBox 是一个允许用户从下拉列表中选择多个项目的组件，支持远程加载数据、自定义样式等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


//定义record
var rec;
Ext.form.MultiComboBox = Ext.extend(Ext.form.TriggerField, {
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
    listClass: '',
    selectedClass: 'x-combo-selected',
    triggerClass : 'x-form-arrow-trigger',
    shadow:'sides',
    listAlign: 'tl-bl?',
    maxHeight: 300,
    triggerAction: 'query',
    minChars : 4,
    typeAhead: false,
    queryDelay: 500,
    pageSize: 0,
    selectOnFocus:false,
    queryParam: 'query',
    loadingText: 'Loading...',
    resizable: false,
    handleHeight : 8,
    editable: true,
    allQuery: '',
    mode: 'remote',
    minListWidth : 70,
    forceSelection:false,
    typeAheadDelay : 250,
    displaySeparator:';',
    valueSeparator:',',
    lazyInit : true,

    initComponent : function()
    {
        Ext.form.ComboBox.superclass.initComponent.call(this);
        this.addEvents('expand', 'collapse', 'beforeselect', 'select', 'beforequery');
        if (this.transform)
        {
            this.allowDomMove = false;
            var s = Ext.getDom(this.transform);
            if (!this.hiddenName)
            {
                this.hiddenName = s.name;
            }
            if (!this.store)
            {
                this.mode = 'local';
                var d = [], opts = s.options;
                for (var i = 0, len = opts.length; i < len; i++)
                {
                    var o = opts[i];
                    var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value :
                            o.text;
                    if (o.selected)
                    {
                        this.value = value;
                    }
                    d.push([value, o.text]);
                }
                this.store = new Ext.data.SimpleStore({
                    'id': 0,
                    fields: ['value', 'text'],
                    data : d
                });
                this.valueField = 'value';
                this.displayField = 'text';
            }
            s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference
            if (!this.lazyRender)
            {
                this.target = true;
                this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
                Ext.removeNode(s); // remove it
                this.render(this.el.parentNode);
            }
            else
            {
                Ext.removeNode(s); // remove it
            }

        }
        this.selectedIndex = -1;
        if (this.mode == 'local')
        {
            if (this.initialConfig.queryDelay === undefined)
            {
                this.queryDelay = 10;
            }
            if (this.initialConfig.minChars === undefined)
            {
                this.minChars = 0;
            }
        }
    },