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 : 
    [{
        width:          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 : 
    [{
        width:          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、效果圖