ext-2.0扩展多选下拉框(代码及演示)

var auto_field=new Ext.form.MultiSelectField();
if(contextlist==null)
{
    auto_field.contextArray=
    [
      ['1','一'],
      ['2','二'],
      ['3','三']
    ]
}
else
{
    auto_field.contextArray=contextlist;
}
auto_field.fieldLabel=text; 
auto_field.id=id;
auto_field.name=id; 
return auto_field;

代码如下：

Ext.form.MultiSelectField = Ext.extend(Ext.form.TriggerField,  {   
    readOnly : true ,   
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},   
    displayField : 'text',  
    contextArray: undefined, //必须满足每行至少两列,第一、二列分别为[value,text]
    valueField : undefined,   
    hiddenName : undefined,   
    listWidth : undefined,   
    minListWidth : 50,   
    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            {
                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);
                });   
                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)
        {      
            Array.add(text_arrtemp,text);
            Array.add(ID_arrtemp,value);
        }
        else
        {
            Array.remove(text_arrtemp,text);
            Array.remove(ID_arrtemp,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);