Extjs 多选和单选下拉框

http://www.mhzg.net/a/20112/2011219130030.html

//单选下拉框
Boat.UI.SingleSelect = Ext.extend(Ext.form.ComboBox, {
    triggerAction: 'all',
    mode: 'local',
    editable: false,
    emptyText: '请选择...',
    displayField: 'text',
    valueField: 'value',
    /*
    @store
    */
    initComponent: function() {
        this.hiddenName = this.name;
        Boat.UI.SingleSelect.superclass.initComponent.call(this);
    },
    setValue: function(v) {
        if (Ext.type(v) == 'object') {
            v = v[this.valueField];
        }
        Boat.UI.SingleSelect.superclass.setValue.call(this, v);
    }
});
Ext.reg('select', Boat.UI.SingleSelect);
//多选下拉框
Boat.UI.MultiSelect = Ext.extend(Boat.UI.SingleSelect, {
    tpl: '<div class="multiselect"></div>',
    // private
    initList: function() {
        Boat.UI.MultiSelect.superclass.initList.call(this);
        this.initCheckBox();
    },
    // private
    initCheckBox: function() {
        var ct = this.innerList.first('.multiselect');
        this.items = new Ext.util.MixedCollection();
        var fn = function(r) {
            var c = new Ext.form.Checkbox({
                boxLabel: r.data[this.displayField],
                inputValue: r.data[this.valueField],
                renderTo: ct
            });
            this.items.add(c);
        };
        this.store.each(fn, this);
        this.on('collapse', this.onCollapse, this);
    },
    onCollapse: function() {
        var value = [];
        var fn = function(c) {
            if (c.getValue()) {
                value.push(c.el.dom.value);
            }
        };
        this.items.each(fn);
        this.setValue(value);
    },
    setValue: function(v) {
        if (!Ext.isArray(v)) { v = [v]; }
        this.hiddenField.value = v;
        Ext.form.ComboBox.superclass.setValue.call(this, this.getTexts(v));
        this.value = v;
    },
    getTexts: function(v) {
        var texts = [];
        var fn = function(r) {
            var rv = r.data[this.valueField];
            if (v.indexOf(rv) > -1) {
                texts.push(r.data[this.displayField]);
            }
        };
        this.store.each(fn, this);
        return texts.join();
    },
    afterExpand: function() {
        this.items.reset();
        if (!Ext.isArray(this.value) || this.value.length == 0) { return; }
        var v = this.value;
        this.items.each(function(item) {
            var rv = item.el.dom.value;
            if (v.indexOf(rv) > -1) {
                item.setValue(true);
            }
        });
    }
});
Ext.reg('multiselect', Boat.UI.MultiSelect);
CSS:
 
.multiselect .x-form-check-wrap{float:left;margin:3px;}