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、效果图

posted on   guarder  阅读(5670)  评论(1编辑  收藏  举报

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示