学习笔记-extjs3.4 下拉多选框_extjs3.4 复选框实现样例-优快云博客

本文链接：https://blog.youkuaiyun.com/liyang_hawk/article/details/11561101

这篇博客分享了如何在ExtJS3.4中使用LovCombo扩展创建下拉多选框，该组件具有良好的显示效果和稳定性。作者通过展示示例代码，演示了如何实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原先做的时候，在网上找了很多例子，最后定下了LovCombo这个扩展例子，比较好看，而且稳定性强一些，暂时还没发现什么bug，先贴张图看看效果。

作为多选的时候，会是一种很好的选择，下面是主要代码。

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="extjs/ux/Ext.ux.form.LovCombo.css">
    
    <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>
	<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
	<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
  	<script type="text/javascript" src="extjs/ux/Ext.ux.util.js"></script>//依赖的js文件
  	<script type="text/javascript" src="extjs/ux/Ext.ux.form.LovCombo.js"></script>
  	//重写css定位选中的图片位置
  	<style type="text/css">
  		.ux-lovcombo-icon-checked {
			background: transparent url(extjs/resources/themes/images/default/menu/checked.gif);
		}
		.ux-lovcombo-icon-unchecked {
			background: transparent url(extjs/resources/themes/images/default/menu/unchecked.gif);
		}
  	</style>
  	<script type="text/javascript">
  		Ext.onReady(function(){
			var win = new Ext.Window({
				title: 'LovCombo',
				height: 200,
				width: 200,
				items: [{
					xtype: 'lovcombo',
					fieldLabel: '下拉多选',
					mode: 'local',
					triggerAction: 'all',
					store: new Ext.data.ArrayStore({
				        id: 0,
				        fields: [
				            'myId',
				            'displayText'
				        ],
				        data: [[1, 'item1'], [2, 'item2']]
				    }),
				    valueField: 'myId',
				    displayField: 'displayText'		
				}]
			}).show();
  		});
  	</script>

大多代码都是网络学习，仅供参考。