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、效果图
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步