Question

Extjs怎么实现下拉框多选

以下是我的代码，我是菜鸟，各位小弟大神求助。下面这样写只能实现单选
js文件：
Ext.define('jwapp.jcyy.JwglDepotComboBox2', {
extend:'Ext.form.field.ComboBox',
initComponent: function() {
var me = this;
me.minChars = 2;
me.triggerAction = 'all';
me.displayField = 'name';
me.valueField = 'id';
me.typeAhead = true;
me.queryMode = 'remote';

me.store = new Ext.data.JsonStore({

fields:[{name: 'id'},
{name: 'name'}],
autoLoad: true,
proxy: {
type: 'ajax',
xtype: 'combo',
url : Ext.ctxpath+'/commons/getGyjcDep.do',
reader: {
type: 'json',
root: 'items',
totalProperty: 'total'
}
}
});
me.callParent();
}
});

=======jsp调用此js：
var duanbie = Ext.create('jwapp.jcyy.JwglDepotComboBox2', {
labelAlign: 'right',
labelWidth:45,
selType : 'checkboxmodel',
width :65

});

Answer 1

1、扩展js类库，在项目中建立一个 js文件，命名为:xxx.js  其代码为

if ('function' !== typeof RegExp.escape)   
{  
    RegExp.escape = function (s)   
    {  
        if ('string' !== typeof s)   
        {  
            return s;  
        }  
        return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');  
    };  
}  
  
Ext.ns('Ext.form');  
  
Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox,   
{  
    checkField: 'checked',  
    multi: true,  
    separator: ',',  
    initComponent: function ()   
    {  
        if (!this.tpl)   
        {  
            this.tpl = '<tpl for=".">' + '<div class="x-combo-list-item">'  
                    + '<img src="' + Ext.BLANK_IMAGE_URL + '" '  
                    + 'class="ux-MultiSelect-icon ux-MultiSelect-icon-'  
                    + '{[values.' + this.checkField + '?"checked":"unchecked"'  
                    + ']}">'  
                    + '{[values.' + this.displayField + ']}'  
                    + '</div>'  
                    + '</tpl>';  
        }  
  
        Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments);  
  
        this.on(  
        {  
            scope: this,  
            beforequery: this.onBeforeQuery,  
            blur: this.onRealBlur  
        });  
  
        this.onLoad = this.onLoad.createSequence(function ()   
        {  
            if (this.el)   
            {  
                var v = this.el.dom.value;  
                this.el.dom.value = '';  
                this.el.dom.value = v;  
            }  
        });  
    },  
    initEvents: function ()   
    {  
        Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments);  
        this.keyNav.tab = false;  
    },  
    beforeBlur: function ()   
    {  
    },  
    postBlur: function ()   
    {  
    },  
  
    clearValue: function ()   
    {  
        this.value = '';  
        this.setRawValue(this.value);  
        this.store.clearFilter();  
        this.store.each(function (r)   
        {  
            r.set(this.checkField, false);  
        }, this);  
        if (this.hiddenField)   
        {  
            this.hiddenField.value = '';  
        }  
        this.applyEmptyText();  
    },  
    getCheckedDisplay: function ()   
    {  
        var re = new RegExp(this.separator, "g");  
        return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');  
    },  
    getCheckedValue: function (field)   
    {  
        field = field || this.valueField;  
        var c = [];  
        var snapshot = this.store.snapshot || this.store.data;  
        snapshot.each(function (r)   
        {  
            if (r.get(this.checkField))   
            {  
                c.push(r.get(field));  
            }  
        }, this);  
  
        return c.join(this.separator);  
    },  
    onBeforeQuery: function (qe)   
    {  
        qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');  
    },  
    onRealBlur: function ()   
    {  
        this.list.hide();  
        var rv = this.getRawValue();  
        var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));  
        var va = [];  
        var snapshot = this.store.snapshot || this.store.data;  
  
        Ext.each(rva, function (v)   
        {  
            snapshot.each(function (r)   
            {  
                if (v === r.get(this.displayField))   
                {  
                    va.push(r.get(this.valueField));  
                }  
            }, this);  
        }, this);  
        this.setValue(va.join(this.separator));  
        this.store.clearFilter();  
    },  
    onSelect: function (record, index)   
    {  
        if (this.fireEvent('beforeselect', this, record, index) !== false)   
        {  
            record.set(this.checkField, !record.get(this.checkField));  
  
            if (this.store.isFiltered())   
            {  
                this.doQuery(this.allQuery);  
            }  
  
            if (this.multi)   
            {  
                if (record.get("key") == "---" && record.get(this.checkField))   
                {  
                    this.setValue("---");  
                }  
                else   
                {  
                    this.setValue(this.getCheckedValue());  
                }  
            }  
            else   
            {  
                this.clearValue();  
                this.value = record.get(this.valueField);  
                this.setRawValue(record.get(this.displayField));  
                this.list.hide();  
            }  
  
            this.fireEvent('select', this, record, index);  
        }  
    },  
    setValue: function (v)   
    {  
        if (v)   
        {  
            v = '' + v;  
            if (this.valueField)   
            {  
                this.store.clearFilter();  
                this.store.each(function (r)   
                {  
                    var checked = !(!v.match('(^|' + this.separator + ')'  
                                + RegExp.escape(r.get(this.valueField))  
                                + '(' + this.separator + '|$)'));  
                    r.set(this.checkField, checked);  
                }, this);  
                this.value = this.getCheckedValue();  
                this.setRawValue(this.getCheckedDisplay());  
                if (this.hiddenField)   
                {  
                    this.hiddenField.value = this.value;  
                }  
            }  
            else   
            {  
                this.value = v;  
                this.setRawValue(v);  
                if (this.hiddenField)   
                {  
                    this.hiddenField.value = v;  
                }  
            }  
            if (this.el)   
            {  
                this.el.removeClass(this.emptyClass);  
            }  
        }  
        else   
        {  
            this.clearValue();  
        }  
    },  
    selectAll: function ()   
    {  
        this.store.each(function (record)   
        {  
            record.set(this.checkField, true);  
        }, this);  
        this.doQuery(this.allQuery);  
        this.setValue(this.getCheckedValue());  
    },  
    deselectAll: function ()   
    {  
        this.clearValue();  
    }  
});  
Ext.reg('multiSelect', Ext.form.MultiSelect);

2、在ext-all.css文件最后，加入css样式

.ux-MultiSelect-icon { width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important; }  
.ux-MultiSelect-icon-checked { background: transparent url(../images/default/menu/checked.gif); }  
.ux-MultiSelect-icon-unchecked { background: transparent url(../images/default/menu/unchecked.gif); }

3、使用

    var DepartUserStore=new Ext.data.Store(  
     {  
            proxy: new Ext.data.HttpProxy(  
            {  
                    url:'/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx'  
            }),  
            //读取Json  
            reader: new Ext.data.JsonReader(  
            { totalProperty: "totalCount", root: "root" },   
            [  
                    {name:'UserId',type:'int'},  
                    {name:'UserName',type:'string'}  
            ])  
    });  
      
    var DepartUserCbox = new Ext.form.MultiSelect(  
    {  
            fieldLabel: '    姓名',  
            labelStyle: 'width:80px',  
            width: 150,  
            editable: false,  
            id: 'DepartUserDS',  
            hiddenName:'DepartUserIdDS',  
            store: DepartUserStore,  
            emptyText: '--请选择--',  
            allowBlank: false,   
            blankText: '请选择',   
            mode:'remote',  
            displayField: 'UserName',  
            valueField: 'UserId',  
            triggerAction: 'all',  
            selectOnFocus: true,  
            listWidth: 200  
    });  
      
    DepartUserStore.on('load', function ()   
    {  
            DepartUserCbox.selectAll(); //全选  
    }); 
    
    DepartUserStore.load();

Answer 2

开始以为很简单，在option里加个input checkbox就行了。哪知行不通，网上搜了一些实现方法，主要是用div层来模拟下拉。本想照着这种思路，再结合这个项目具体应用自己写一个，发现太麻烦了。刚好在另外一个项目中使用extjs，找到了一个扩展lovcombo，学习了一下它自带的例子（配合2.3版的extjs，3.x版的貌似有问题）。例子倒不难，关键是要把它添加到现有的代码中，并且尽量少的改动原有代码。

下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事件的处理。extjs本身的那种数据和UI分离的模式使得级联的实现非常轻松。只需在省份下拉框的select事件中去更新城市下拉框的store即可。一个需要注意的小地方是：一个选项被select时，需要额外的通过checkField的值来判断该选项是被选中还是被取消。还有就是全选、取消全选（这两个lovcombo自带有方法selectAll和deselectAll）以及被选中选项数目（需要遍历一遍store，并检测每一项的checkField值）。

复制代码 代码如下:
//下拉框的select事件
select:function(combo, record, index)
{
//选中
if(record.get(this.checkField))
{
//选中时的处理逻辑
}
else
{
//未选中
}
}

Answer 3

multiSelect: true

Answer 4

http://blog.163.com/china__xuhua/blog/static/19972316920124179422320/