Ext JS下拉单选框(Combobox,TagFied)使用及疑难问题解决| 成都西华升腾科技有限公司

购物车

0 ITEMS ON YOUR CART

去购物车结算 合计: ￥0

Ext JS开发大全

CmsWing

Ext JS下拉单选框(Combobox,TagFied)使用及疑难问题解决

## Ext JS下拉单选框(Combobox,TagFied)使用及疑难问题解决

### Ext JS下拉框字段组件
在Ext JS中，下拉框选择的字段组件主要有两种， 分别是Combobox 和TagField, 这两种都支持单选和多选， 呈现的效果如下：

Combobox 对应的类是：Ext.form.field.ComboBox ， 虽然支持多选配置，但多选的配置是废弃的， 不建议使用。
TagField对应的类是：Ext.form.field.Tag ， 一般用来选择多个值，也可以选择单个值，如果是单个值的，感觉意义不大。
Ext.form.field.Tag 从Ext.form.field.ComboBox 继承而来。
使用建议如下：
单选 多选 
ComboBox 常用 不建议使用
TagField 一般使用较少 常用
### Combobox 的开发
配置式开发

```json
 {            
	 xtype: 'combobox',            
	 fieldLabel: 'Combobox(单选)',            
	 store: ['关羽', '张飞', '黄忠', '马超']        
 }
```

实例创建型开发
```javascript
Ext.create('Ext.form.field.ComboBox', {            
	fieldLabel: 'Combobox(单选)',            
	store: ['关羽', '张飞', '黄忠', '马超']
})
```

multiSelect ，[已经废弃，不建议使用] 设置多选
### TagField (标签字段) 的开发
配置式开发
```javascript
{            
	   xtype: 'tagfield',            
	   fieldLabel: 'TagField',            
	   store: ['关羽', '张飞', '黄忠', '马超']        
}
```
实例创建型开发

```javascript
Ext.create('Ext.form.field.Tag', {
	fieldLabel: 'TagField',            
	store: ['关羽', '张飞', '黄忠', '马超']        
}
```

multiSelect ， 设置为false 为单选， 默认式多选
autoSelect : 在弹出的下拉框选项中默认选中第一个。
效果类似：
![](/upload/picture/2022-09-27/upload_847cb66820e960432ab821f75c8aa2aa.png)
autoSelectLast ： 在弹出的下拉框选项中默认选中最后一个。
filterPickList：该值设置为true 的效果是： 已经选中的值就不出现在下拉单中了， 也就是如果全部选中的话，下拉单就没有选项了。设置后的效果如下：
![](/upload/picture/2022-09-27/upload_7ab15ad1fcd7a6186c771768c18c1446.png)
如果不设置这个属性，或者设置这个属性为false , 则默认的效果是：
![](/upload/picture/2022-09-27/upload_cba0dbc63b78f4a8477f01c4d07d8038.png)
上面选中的值会以反色显示，如果需要取消选择，再点击一次即可。
### TagField在使用后端数据状况下的使用问题
如果Store的数据是从后端获取的。类似：
```javascript
{            
	xtype: 'tagfield',            
	fieldLabel: 'TagField',            
	autoSelect: true,            
	valueField:'value',            
	displayField:'value',            
	store: new Ext.data.JsonStore({                
		proxy: {                    
		type: 'ajax',                    
		url: 'http://localhost:8080/extjs/tagfield',                    
		reader: {                        
			type: 'json',                        
			rootProperty: 'datas'                    
		}                
	},                
	fields:['value']            
})
```

使用后端数据时， 如何使用value 设置默认值呢？ 首先使用getValue() 获取选中的值看看， 选中两个值，获取的值类似：关羽,黄忠 ， 也就是以逗号分隔的值。
所以使用value:'关羽,黄忠', 设置默认值， 发现无效。
使用 setValue() 设置值， mytagfield.setValue('关羽,黄忠'); ， 页面同样没有任何显示，但是使用 getValue() 却能获取到值。 也就是， 值设置上了， 但是显示不了， 怎么办？
答案就是要增加配置 autoLoadOnValue:true, ， 这个配置的意思就是在设置值时， 默认加载后端数据。也就是数据加载后才能显示下拉项， 有下拉项才能显示选中的值。
设置的值不会再下来单中自动反选的解决
可是，接下来有一个奇怪的问题， 就是在设置默认值之后，** 在点击下拉选项，默认值并没有在下拉选项中反选**， 这样的话对于设置的默认值就可以选到两次，而且通过下拉选项无法去除之前设置的默认值， 效果类似下图：

分析这个原因：
在首次点击组件时，会从后端加载数据， 虽然之前设置默认值的时候有获取过数据， 这里还是会调用一次， 而且基本找不到可以用来禁止记载的配置。
通过源代码调试到底发生了什么会导致刷新Store， 在以下代码段找到了答案：

queryPlan.query 的值是 “”， me.lastQuery 的值是 false, 如果能在设置值之后将组件的lastQuery 的值设置为“”（空字串） 是否问题就解决了？
首先来看一下lastQuery 的作用：
lastQuery用来过滤Store 中的值，把此属性的值删除会导致重新刷新
Combox 类型的组件要使触发器不清除存储的过滤器，可以设置lastQuery 的值为 “” 。
解决方法就是在TagField 的beforequery 事件中设置该值，设置代码如下：
```javascript
 listeners: {                
	 beforequery: function(tagfield){                    
		 tagfield.combo.lastQuery = '';                
	 }            
 }
```

注意：
以上是 7.x 版本的解法，设置组件的combo的lastQuery 的值。
在6.x 版本中可以直接设置属性的lastQuery 的值， 而且不限定在beforequery事件中执行，可以在按钮执行方法中执行， 但是在 7.x 版本中看起来不行。
### 本篇代码及在线示例
前端演示
https://osxm.github.io/extjs_dev_ency/#valueselectfielddemo
注意： 取后端数据需要使用启动以下后端代码的应用才能生效。
后端代码：
https://github.com/osxm/demoworkspace/blob/master/spring/springboot/src/main/java/cn/osxm/springboot/controller/ExtjsController.java

Ext JS开发大全

Ext JS下拉单选框(Combobox,TagFied)使用及疑难问题解决

网站导航