Ext实现多选下拉框

Ext自带的Combox只能单选，实际中很多地方需要多选。

借助lovcombo组件可以做，下载链接：http://lovcombo.extjs.eu/。

1、页面引入组件

<link rel="stylesheet" type="text/css" href="../css/LovCombo.css"/>
<script type="text/javascript" src="../js/lovcombo.js"></script> 

2、设置组件，xtype:'combo'改为xtype:'lovcombo'

{
    xtype : 'compositefield',
    fieldLabel: '测试22',
    items : 
    [{
                  100,
        xtype:          'lovcombo',
        mode:           'local',
        triggerAction : 'all',
        forceSelection: true,
        editable:       false,
        name:           'test12',
        value:          '是',
        displayField:   'name',
        valueField:     'value',
        store:new Ext.data.JsonStore({
            fields : ['name', 'value'],
            data   : [
            {name : '是',  value: '是'},
            {name : '否',  value: '否'}
            ]
        })
    }]
}

3、效果图

4、但是有个问题，勾选多个值，组件失去焦点后，文本框的值会被清空，需要额外增加一段代码，见注释部分。

{
    xtype : 'compositefield',
    fieldLabel: '测试22',
    items : 
    [{
                  100,
        xtype:          'lovcombo',
        mode:           'local',
        triggerAction : 'all',
        forceSelection: true,
        editable:       false,
        name:           'test12',
        value:          '是',
        displayField:   'name',
        valueField:     'value',
        store:new Ext.data.JsonStore({
            fields : ['name', 'value'],
            data   : [
            {name : '是',  value: '是'},
            {name : '否',  value: '否'}
            ]
        }), beforeBlur : function() {
                   // 解决失去焦点后文本框清空问题
            }
    }]
}

5、效果图