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.value;
        } else {
            return Ext.form.MultiSelectField.superclass.getValue.call(this);
        }
    },
    setValue : function(id, text, ischecked) {
        var text = text;
        var value = id;
        var return_text_string;
        var return_value_string;

        var text_temp = Ext.form.MultiSelectField.superclass.getValue.call(this);
        var ids_temp = typeof this.value != 'undefined' ? this.value : '';
        var text_arrtemp = text_temp.split(",");
        var ID_arrtemp = ids_temp.split(",");
        if(ischecked)   
        {         
           text_arrtemp.push(text); 
            ID_arrtemp.push(value);
        }   
        else  
        {   
            text_arrtemp.remove(text);
            ID_arrtemp.remove(value);
        }   

        return_text_string = text_arrtemp.toString();
        return_value_string = ID_arrtemp.toString();
        var first_text_str = return_text_string.substr(0, 1);
        var first_value_str = return_value_string.substr(0, 1);
        if (first_text_str == ",") {
            return_text_string = return_text_string.substr(1);
        }
        if (first_value_str == ",") {
            return_value_string = return_value_string.substr(1);
        }
        Ext.form.MultiSelectField.superclass.setValue.call(this,return_text_string);
        
        this.value = return_value_string;

        if (this.hiddenField) {
            this.hiddenField.value = return_value_string;
        }

    },
    onDestroy : function() {
        if (this.list) {
            this.list.destroy();
        }
        Ext.form.MultiSelectField.superclass.onDestroy.call(this);
    },
    collapseIf : function(e) {
        if (!e.within(this.wrap) && !e.within(this.list)) {
            this.collapse();
        }
    },
    expand : function() {
        if (this.isExpanded() || !this.hasFocus) {
            return;
        }
        this.list.alignTo(this.wrap, this.listAlign);
        this.list.show();
        Ext.getDoc().on('mousewheel', this.collapseIf, this);
        Ext.getDoc().on('mousedown', this.collapseIf, this);
        this.fireEvent('expand', this);
    },
    collapse : function() {
        if (!this.isExpanded()) {
            return;
        }
        this.list.hide();
        Ext.getDoc().un('mousewheel', this.collapseIf, this);
        Ext.getDoc().un('mousedown', this.collapseIf, this);
        this.fireEvent('collapse', this);
    },
    isExpanded : function() {
        return this.list && this.list.isVisible();
    },
    onTriggerClick : function() {
        if (this.disabled) {
            return;
        }
        if (this.isExpanded()) {
            this.collapse();
        } else {
            this.onFocus({});
            this.expand();
        }
        this.el.focus();
    }
});
Ext.reg('multiselectfield', Ext.form.MultiSelectField);
Array.prototype.remove=function(str)
{
    var tmp=this;
    for(i=0;i<tmp.length;i++)
    {
        if(tmp[i].toString()==str){
            tmp.splice(i,1);
            break;
        }
    }
}