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

为感谢论坛发布
http://blog.csdn.net/edisundong/archive/2008/01/25/2065379.aspx

说明：

感谢飞天色鼠和javaeye论坛的sp2，其实是改了飞天色鼠的代码。sp2给了很大帮助，感谢！

演示效果：



调用代码如下：

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); 

评论

14 楼 yuanke 2009-01-17  

感谢啥，不能运行！

13 楼 dingchao.lonton 2009-01-12  

98行的确有错误，包缺少；错误

12 楼 hanjs 2009-01-11  

select支持多选吧，只是不是用下来框来显示的。不过可以设置一次显示多少个，好像是size。

11 楼 kimmking 2009-01-11  

<p>lovcombo</p>
<p> </p>
<p> </p>

10 楼 kimmking 2009-01-11  

官方论坛有了这个了。
半年前就用过。~、~

9 楼 boyee 2009-01-11  

这个组件怎么在ext2.2下面,选择框怎么没有出现

8 楼 woodman 2008-12-25  

98行少了一部分代码哦

7 楼 404liuli 2008-04-22  

为什么第98行出错？

6 楼 goodboy 2008-01-31  

调用代码是不是省略了阿

5 楼 dengddq 2008-01-28  

项目刚好需要这个多选下拉框,谢谢楼主,如果能够控制一下鼠标移到选项的效果,像Combo一样,那就完美了。

4 楼 baiuwl 2008-01-28  

一个下拉框就这么麻烦，还大叫EXT有多牛？
晕。。。
无语。。。

3 楼 godson_2003 2008-01-28  

98行代码有误，编辑器的原因？

2 楼 edisundong 2008-01-26  

实在不好意思，我是.net阵营的，dwr我没有接触过，你的意思是不是点击下拉框的时候lazy load？？我也正在考虑lazy load的问题，不过最近太忙，而且其实这个控件有个bug，目前正在修复

1 楼 kaki 2008-01-25  

感谢分享。

我有一个问题：

我使用DWR返回json数据串，但是不知道如何让Ext.tree一次性loader返回的川。

希望能够获得您的指点。