ExtJS ComboBox的用法+代码

Ext.onReady(function() {
			var store = Ext.create('Ext.data.Store', {
						autoLoad : true,
						fields : ['value', 'text'],
						proxy : {
							type : 'ajax',
							url : '/demo/common/data/demo.json',// url根据实际修改即可
							reader : 'json'
						}
					});
			var comboBoxDemo = Ext.create('Ext.form.field.ComboBox', {
						renderTo : Ext.getBody(),
						width : 400,
						margin : 20,
						labelWidth : 80, // 标签的宽度
						fieldLabel : 'ComboBox', // 标签显示的内容
						emptyText : '[请选择]', // combobox内容为空时显示的文字
						displayField : 'text', // 客户端显示的数据
						valueField : 'value', // 实际返回服务器的值，可以不指定，不指定时返回displayField的值
						store : store, // 数据源，类型限制Ext.data.Store/String/Array
						// queryMode : 'local', // 查询方式：local（查询本地数据），默认为remote（查询远程数据）
						// pageSize : 5, 限制下拉项每页显示个数，只适用于queryMode:'remote'
						// typeAhead : true, // 延迟查询，与typeAheadDelay配合使用
						// typeAheadDelay : 1000, // 延迟时间，单位为毫秒，默认值为250
						multiSelect : true, // 是否可以选择多条数据
						// editable : false, // 是否可编辑，默认值为true，false为不可编辑
						// forceSelection : true, // 必须选择下拉框中的值，不允许用户输入自定义的值
						// hiddenName : '', // 真正提交时此combo的name，请一定要注意
						// hideTrigger : true, //是否隐藏触发项（下拉框右侧图标）
						listeners : { // 监听事件。更多事件请参考API
							// 自定义的简单combobox扩展插件，功能：实现2个选项之间的选项全部选中，第一个选项为起始选项
							select : function(combo, records, eOpts) {
								// records保存的是所有选中项
								var first = store.indexOf(records[0]);
								var last = store.indexOf(records[records.length - 1]);
								if (first < last) {
									records.splice(0);// 先清空records，再重新赋值
									for (var i = first; i <= last; i++) {
										records.push(store.getAt(i));
									}
								} else {
									records.splice(0);
									for (var i = first; i >= last; i--) {
										records.push(store.getAt(i));
									}
								}
								combo.setValue(records);// 将设置好的records设置为选中项
							}
						}
					});
		});