EXT2.0 多选下拉框

预览：

<INPUT TYPE="" NAME="" id='multiselect'>
<script>
Ext.onReady(function()  {

    var arr = [['1', '项一'], ['2', '项二'], ['3', '项三'],['4', '项四'],['5', '项五']];
    var arr2 = [['1', '项一'], ['2', '项二']];


    var auto_field = new Ext.form.MultiSelectField( {
        applyTo:'multiselect',  
        hiddenName:'hid',  //Ext.get('hid').getValue() 可以得到索引号ID数组
        contextArray : arr,
        fieldLabel : 'adfadsf',
        id : 'test',
        defaltValueArray:arr2,
        name : 'test'
    });

});
</script>

EXT扩展组件:

Ext.form.MultiSelectField = Ext.extend(Ext.form.TriggerField,  {
    readOnly : true,
    defaultAutoCreate :  {
        tag : "input",
        type : "text",
        size : "24",
        autocomplete : "off"
    },
    displayField : 'text',
    contextArray : undefined, 
    valueField : undefined,
    hiddenName : undefined,
    listWidth : undefined,
    minListWidth : 50,
    defaltValueArray:undefined,
    layerHeight : undefined,
    minLayerHeight : 60,
    value : undefined,
    baseParams :  {},
    checkpanel : undefined,
    initComponent : function()  {
        Ext.form.MultiSelectField.superclass.initComponent.call(this);
        this.addEvents('select', 'expand', 'collapse', 'beforeselect');
        
        if (this.transform)  {
            this.allowDomMove = false;
            var s = Ext.getDom(this.transform);
            if (!this.hiddenName)  {
                this.hiddenName = s.name;
            }
            s.name = Ext.id();
            if (!this.lazyRender)  {
                this.target = true;
                this.el = Ext.DomHelper.insertBefore(s, this.autoCreate
                        || this.defaultAutoCreate);
                Ext.removeNode(s);
                this.render(this.el.parentNode);
                
            } else  {
                Ext.removeNode(s);
            }

        }
    },
    onRender : function(ct, position)  {
        Ext.form.MultiSelectField.superclass.onRender.call(this, ct, position);
        if (this.hiddenName)  {
            this.hiddenField = this.el.insertSibling( {
                tag : 'input',
                type : 'hidden',
                name : this.hiddenName,
                id : (this.hiddenId || this.hiddenName)
            }, 'before', true);
            this.hiddenField.value = this.hiddenValue !== undefined
                    ? this.hiddenValue
                    : this.value !== undefined ? this.value : '';
            this.el.dom.removeAttribute('name');
        }
        if (Ext.isGecko)  {
            this.el.dom.setAttribute('autocomplete', 'off');
        }
        this.initList();
    },
    initList : function()  {
        if (!this.list)  {
            var cls = 'x-multiselectfield-list';
            this.list = new Ext.Layer( {
                shadow : this.shadow,
                cls : [cls, this.listClass].join(' '),
                constrain : false
            });
            var lw = this.listWidth
                    || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setWidth(lw);
            this.list.swallowEvent('mousewheel');
            this.innerList = this.list.createChild( {
                cls : cls + '-inner'
            });
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
            this.innerList.setHeight(this.layerHeight || this.minLayerHeight);
            if (!this.checkpanel)  {
                this.checkpanel = this.CheckPanel(this.innerList);
            }
            this.checkpanel.render();
        }
    },
    onSelect : function(id, text, checked)  {
        this.setValue(id, text, checked);
    },
    CheckPanel : function(el)  {
        var checkpanel = new Ext.Panel( {
            el : el,
            autoScroll : true
        });
        var multiselectField = this;
        if (typeof this.contextArray != 'undefined')  {

            for (var i = 0; i < this.contextArray.length; i++)  {
            
                var contArry = this.contextArray[i];
                var auto_field = new Ext.form.Checkbox( {
                    boxLabel : contArry[1],
                    id : contArry[0],
                    name : contArry[0],
                    cls : 'x-multiselectfield-list'
                });
                auto_field.on('check', function(auto_field)  {
                    multiselectField.onSelect(auto_field.id,auto_field.boxLabel, auto_field.checked);
                });

                if(typeof this.defaltValueArray != 'undefined') {
                    for (var j = 0; j < this.defaltValueArray.length; j++)  {
                        var defvalArry =  this.defaltValueArray[j];

                        if(defvalArry[0]==contArry[0]) {
                            auto_field.checked=true;
                        }
                    }
                }

                checkpanel.add(auto_field);
            }
        }
        return checkpanel
    },
    getValue : function()  {
        if (typeof this.value != 'undefined')  {
            return this