ext2.0扩展多选下拉框(代码及演示)

说明&＃xff1a;

感谢飞天色鼠和javaeye论坛的sp2&＃xff0c;其实是改了飞天色鼠的代码。sp2给了很大帮助&＃xff0c;感谢&＃xff01;

演示效果&＃xff1a;

调用代码如下&＃xff1a;

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

代码如下&＃xff1a;

Ext.form.MultiSelectField &＃61; Ext.extend(Ext.form.TriggerField,  {  
    readOnly : true ,  
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},  
    displayField : &＃39;text&＃39;, 
    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
            (  
                    &＃39;select&＃39;,  
                    &＃39;expand&＃39;,  
                    &＃39;collapse&＃39;,  
                    &＃39;beforeselect&＃39;       
            );  
            if(this.transform)
            {  
                this.allowDomMove &＃61; false;  
                var s &＃61; Ext.getDom(this.transform);  
                if(!this.hiddenName)
                {  
                    this.hiddenName &＃61; s.name;  
                }  
                s.name &＃61; Ext.id();   
                if(!this.lazyRender)
                {  
                    this.target &＃61; true;  
                    this.el &＃61; 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 &＃61; this.el.insertSibling({tag:&＃39;input&＃39;, type:&＃39;hidden&＃39;, name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},  
                    &＃39;before&＃39;, true);  
            this.hiddenField.value &＃61;  
                this.hiddenValue !&＃61;&＃61; undefined ? this.hiddenValue :  
                this.value !&＃61;&＃61; undefined ? this.value : &＃39;&＃39;;  
            this.el.dom.removeAttribute(&＃39;name&＃39;);  
        }  
        if(Ext.isGecko){  
            this.el.dom.setAttribute(&＃39;autocomplete&＃39;, &＃39;off&＃39;);  
        }  
        this.initList();  
    },  
    initList : function()
    {  
        if(!this.list)
        {  
            var cls &＃61; &＃39;x-multiselectfield-list&＃39;;  
            this.list &＃61; new Ext.Layer
            ({  
                shadow: this.shadow, cls: [cls, this.listClass].join(&＃39; &＃39;), constrain:false  
            });  
            var lw &＃61; this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);  
            this.list.setWidth(lw);  
            this.list.swallowEvent(&＃39;mousewheel&＃39;);  
            this.innerList &＃61; this.list.createChild({cls:cls&＃43;&＃39;-inner&＃39;});  
            this.innerList.setWidth(lw - this.list.getFrameWidth(&＃39;lr&＃39;));  
            this.innerList.setHeight(this.layerHeight || this.minLayerHeight);  
            if(!this.checkpanel)
            {  
                this.checkpanel &＃61; this.CheckPanel(this.innerList);      
            }  
            this.checkpanel.render();  
        }  
    },  
    onSelect:function(id,text,checked)
    {  
            this.setValue(id,text,checked);  
    },  
    CheckPanel:function(el)
    {  
        var checkpanel &＃61; new Ext.Panel
        ({  
            el:el,  
            autoScroll:true
        }); 
        var multiselectField &＃61; this;
        if(typeof this.contextArray !&＃61; &＃39;undefined&＃39;)
        {
            for(var i&＃61;0;i            {
                var contArry&＃61;this.contextArray[i];
                var auto_field&＃61;new Ext.form.Checkbox
                ({
                    boxLabel:contArry[1],
                    id:contArry[0],
                    name:contArry[0],
                    cls :&＃39;x-multiselectfield-list&＃39;
                });
                auto_field.on(&＃39;check&＃39;,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 !&＃61; &＃39;undefined&＃39;)
        {  
            return this.value;  
        }
        else
        {  
            return Ext.form.MultiSelectField.superclass.getValue.call(this);  
        }  
    },  
    setValue : function(id,text,ischecked)
    {  
        var text &＃61; text;  
        var value &＃61; id; 
        var return_text_string;
        var return_value_string;

        var text_temp    &＃61; Ext.form.MultiSelectField.superclass.getValue.call(this); 
        var ids_temp     &＃61; typeof this.value !&＃61; &＃39;undefined&＃39; ? this.value : &＃39;&＃39;;
        var text_arrtemp &＃61; text_temp.split(",");
        var ID_arrtemp   &＃61; 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  &＃61; text_arrtemp.toString();
        return_value_string &＃61; ID_arrtemp.toString();
        var first_text_str  &＃61; return_text_string.substr(0,1);
        var first_value_str &＃61; return_value_string.substr(0,1);
        if(first_text_str&＃61;&＃61;",")
        {
          return_text_string&＃61;return_text_string.substr(1);
        }
        if(first_value_str&＃61;&＃61;",")
        {
          return_value_string&＃61;return_value_string.substr(1);
        }
        Ext.form.MultiSelectField.superclass.setValue.call(this, return_text_string);  
        this.value &＃61; return_value_string;
        if(this.hiddenField)
        {  
            this.hiddenField.value &＃61; 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(&＃39;mousewheel&＃39;, this.collapseIf, this);  
        Ext.getDoc().on(&＃39;mousedown&＃39;, this.collapseIf, this);  
        this.fireEvent(&＃39;expand&＃39;, this);  
    },  
    collapse : function()
    {  
        if(!this.isExpanded())
        {  
            return;  
        }  
        this.list.hide();  
        Ext.getDoc().un(&＃39;mousewheel&＃39;, this.collapseIf, this);  
        Ext.getDoc().un(&＃39;mousedown&＃39;, this.collapseIf, this);  
        this.fireEvent(&＃39;collapse&＃39;, 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(&＃39;multiselectfield&＃39;, Ext.form.MultiSelectField);