扩展Ext的Combobox实现多选下拉列表

使用过Ext的人都知道，Ext的Combobox只支持单项选择，而项目中我们经常用到多选下拉框，怎么做呢？

很简单，因为Ext给我们提供了继承机制，这也意味着我们可以通过继承Combobox的方式来重写下拉列表的实现，达到多选的目的！

经过查看Combobox的源码我们发现，Combobox的下拉列表是由DataView类来实现的，那么，我们开始大胆的想：我们直接用一个带CheckBox的GridPanal来代替DataView实现可以吗？

OK，当然可以！我自己研究了一下，写了个代码，基本可以实现下拉框多选了：

Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox, {
    // 使用积极的初始化模式
    lazyInit : false,
    headerText : "EMPTY",
    resetText : "EMPTY",
    sureText : "EMPTY",
    textValue : "",
    maxHeight : 310,
    beforeSelect : null,
    /**
     * 初始化下拉列表 原来的下拉列表使用DataView类来实现,现在改为使用GridPanel来实现,这样更方便于多选操作
     */
    initList : function()
    {
        if (!this.list)
        {
            var cls = 'x-combo-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.assetHeight = 0;

            if (this.title)
            {
                this.header = this.list.createChild( {
                    cls : cls + '-hd',
                    html : this.title
                });
                this.assetHeight += this.header.getHeight();
            }

            this.innerList = this.list.createChild( {
                cls : cls + '-inner'
            });
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));

            var sm = new Ext.grid.CheckboxSelectionModel();
            var all = this;
            var ht = this.headerText == "EMPTY" ? "选择项目" : this.headerText;
            var rt = this.resetText == "EMPTY" ? "重置" : this.resetText;
            var st = this.sureText == "EMPTY" ? "确定" : this.sureText;
            this.view = new Ext.grid.GridPanel( {
                store : this.store,
                hideHeaders : true,
                applyTo : this.innerList,
                columns : [ sm, {
                    header : ht,
                    sortable : false,
                    dataIndex : this.displayField
                } ],
                viewConfig : {
                    forceFit : true
                },
                autoScroll : true,
                width : this.list.getWidth(),
                sm : sm,
                tbar : new Ext.PagingToolbar({ pageSize: this.pageSize, store:this.store}),
                bbar : [ {
                    xtype : "button",
                    text : rt,
                    handler : function()
                    {
                        all.onReset();
                    }
                }, "-", {
                    xtype : "button",
                    text : st,
                    handler : function()
                    {
                        all.onSure();
                    }
                } ],
                iconCls : 'icon-grid'
            });

            // 设置下拉列表的高度,如果超过了最大高度则使用最大高度
            if (this.view.getSize().height > this.maxHeight)
            {
                this.view.setHeight(this.maxHeight);
            }

            // 如果设置了默认值,则在下拉列表中回显
            if (this.value)
            {
                this.setValue(this.value);
            }

            if (this.pageSize)
            {
                /*
                 * var pageBar = new Ext.PagingToolbar({ pageSize: 15, store:
                 * this.view.getStore(), displayInfo: true });
                 * this.view.add(pageBar); this.view.doLayout();
                 */
            }

            if (this.resizable)
            {
                this.resizer = new Ext.Resizable(this.list, {
                    pinned : true,
                    handles : 'se'
                });
                this.resizer.on('resize', function(r, w, h)
                {
                    this.maxHeight = h - this.handleHeight
                            - this.list.getFrameWidth('tb') - this.assetHeight;
                    this.listWidth = w;
                    this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
                    this.restrictHeight();
                }, this);
                this[this.pageSize ? 'footer' : 'innerList'].setStyle(
                        'margin-bottom', this.handleHeight + 'px');
            }
        }
    },
    /**
     * 确定选择事件
     */
    onSure : function()
    {
        var selecteds = this.view.getSelectionModel().getSelections();
        var value = [];
        var all = this;
        var tv = [];
        Ext.each(selecteds, function(rc)
        {
            value.push(rc.data[all.valueField]);
            tv.push(rc.data[all.displayField]);
        });
        this.textValue = tv.join();
        var valueStr = value.join();
        beforeSelect = this.beforeSelect;
        if(typeof beforeSelect == 'function')
        {
            if(!beforeSelect(valueStr))
            {
                this.collapse();
                return;
            }
        }
        this.setValue(valueStr);
        this.value = value.join();
        this.collapse();
    },

    getTextValue : function(){
        return this.textValue;
    },
    /**
     * 重置事件
     */
    onReset : function()
    {
        this.view.getSelectionModel().clearSelections();
    },
    /**
     * 给ComboBox设置值
     * 设置完全局的值后,再在下拉列表中回显这些值
     */
    setValue : function(v)
    {
        var text = v;
        var ta = [];
        // 根据值查找出名称,并组装显示
        if (this.valueField && v && ("" + v).length > 0)
        {
            var sv = ("" + v).split(",");
            for ( var i = 0; i < sv.length; i++)
            {
                var r = this.findRecord(this.valueField, sv[i]);
                if (r)
                {
                    ta.push(r.data[this.displayField]);
                }
                else if (this.valueNotFoundText !== undefined)
                {
                    ta.push(this.valueNotFoundText);
                }
            }
            text = ta.join();
        }
        this.lastSelectionText = ta.join();
        if (this.hiddenField)
        {
            this.hiddenField.value = v;
        }
        this.textValue = text;
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
        // 在下拉列表中回显设置的值
        if (this.view && v && ("" + v).length > 0)
        {
            var sv = ("" + v).split(",");
            var mv = this.view;
            var sr = [];
            var all = this;
            this.store.each(function(item)
            {
                for ( var i = 0; i < sv.length; i++)
                {
                    if (sv[i] == item.data[all.valueField])
                    {
                        sr.push(item);
                        break;
                    }
                }
            });
            this.view.getSelectionModel().selectRecords(sr);
        }
    },
    /**
     * 触发下拉列表展现 这里不使用ComboBox的查询功能,直接展现
     */
    onTriggerClick : function()
    {
        if (this.disabled)
        {
            return;
        }
        if (this.isExpanded())
        {
            this.collapse();
        }
        else
        {
            this.onFocus( {});
            this.expand();
            this.el.focus();
        }
    }
});

怎么使用呢？看看这个使用的例子吧：

<html>
<head>
<script type="text/javascript" src="./ext-2.0.2/adapter/ext/ext-base.js">script>
<script type="text/javascript" src="./ext-2.0.2/ext-all.js">script>
<script type="text/javascript" src="./MultiCombo.js">script>
<link rel="stylesheet" type="text/css"
    href="./ext-2.0.2/resources/css/ext-all.css" />
head>
<body>
<button onclick="showMenu(this)" id="heare">显示值button>
<div id="local-states">div>
body>
<script>
var store = new Ext.data.SimpleStore({
   fields : ['id', 'text'],
   data : [['1', '一月'], ['2', '三月'], ['3', '二月'], ['4', '四月'],
     ['5', '五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'],['9', '九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月'],['13', '十三月'], ['14', '十四月'], ['15', '十五月']]
});

var combo = new Ext.form.MultiSelect({
   id : 'myCombo',
   name : 'name',
   hiddenName : 'id',
   store : store,
   emptyText : '请选择...',
   mode : 'local',
   value : '5,6,7',
   triggerAction : 'all',
   valueField : 'id',
   displayField : 'text',
   editable : false,
   pageSize : 5,
   beforeSelect : function(selectValues){
        if(selectValues == '5')
        {
            return true;
        }
        else{
            Ext.Msg.alert("alert", "Can not!");
            return false;
        }
   },
   blankText : '请选择...'
});
combo.render("local-states");

function showMenu(){
    alert(combo.getValue());
}
script>
html>

OK，目标达到！细心的朋友会发现，这个多选下拉列表使用的就是GridPanel实现的，而GirdPanel是可以支持分页的，那么我们可不以可以搞分页呢？肯定是可以的，但是经过我试了之后发现，加上分页控件后下拉列表展现变得非常难看，这个问题还是留给朋友们实现吧，呵呵可……

由于注册未满一周，不能上传效果图，大家还是拷贝源码下去自己运行吧……