天下高月小说_Ext JS下拉單選框(Combobox,TagFied)使用及疑難問(wèn)題解決| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

Ext JS下拉單選框(Combobox,TagFied)使用及疑難問(wèn)題解決

## Ext JS下拉單選框(Combobox,TagFied)使用及疑難問(wèn)題解決

### Ext JS下拉框字段組件
在Ext JS中，下拉框選擇的字段組件主要有兩種， 分別是Combobox 和TagField, 這兩種都支持單選和多選， 呈現的效果如下：

Combobox 對應的類(lèi)是：Ext.form.field.ComboBox ， 雖然支持多選配置，但多選的配置是廢棄的， 不建議使用。
TagField對應的類(lèi)是：Ext.form.field.Tag ， 一般用來(lái)選擇多個(gè)值，也可以選擇單個(gè)值，如果是單個(gè)值的，感覺(jué)意義不大。
Ext.form.field.Tag 從Ext.form.field.ComboBox 繼承而來(lái)。
使用建議如下：
單選 多選 
ComboBox 常用 不建議使用
TagField 一般使用較少 常用
### Combobox 的開(kāi)發(fā)
配置式開(kāi)發(fā)

```json
 {            
	 xtype: 'combobox',            
	 fieldLabel: 'Combobox(單選)',            
	 store: ['關(guān)羽', '張飛', '黃忠', '馬超']        
 }
```

實(shí)例創(chuàng  )建型開(kāi)發(fā)
```javascript
Ext.create('Ext.form.field.ComboBox', {            
	fieldLabel: 'Combobox(單選)',            
	store: ['關(guān)羽', '張飛', '黃忠', '馬超']
})
```

multiSelect ，[已經(jīng)廢棄，不建議使用] 設置多選
### TagField (標簽字段) 的開(kāi)發(fā)
配置式開(kāi)發(fā)
```javascript
{            
	   xtype: 'tagfield',            
	   fieldLabel: 'TagField',            
	   store: ['關(guān)羽', '張飛', '黃忠', '馬超']        
}
```
實(shí)例創(chuàng  )建型開(kāi)發(fā)

```javascript
Ext.create('Ext.form.field.Tag', {
	fieldLabel: 'TagField',            
	store: ['關(guān)羽', '張飛', '黃忠', '馬超']        
}
```

multiSelect ， 設置為false 為單選， 默認式多選
autoSelect : 在彈出的下拉框選項中默認選中第一個(gè)。
效果類(lèi)似：
![](/upload/picture/2022-09-27/upload_847cb66820e960432ab821f75c8aa2aa.png)
autoSelectLast ： 在彈出的下拉框選項中默認選中最后一個(gè)。
filterPickList：該值設置為true 的效果是： 已經(jīng)選中的值就不出現在下拉單中了， 也就是如果全部選中的話(huà)，下拉單就沒(méi)有選項了。設置后的效果如下：
![](/upload/picture/2022-09-27/upload_7ab15ad1fcd7a6186c771768c18c1446.png)
如果不設置這個(gè)屬性，或者設置這個(gè)屬性為false , 則默認的效果是：
![](/upload/picture/2022-09-27/upload_cba0dbc63b78f4a8477f01c4d07d8038.png)
上面選中的值會(huì )以反色顯示，如果需要取消選擇，再點(diǎn)擊一次即可。
### TagField在使用后端數據狀況下的使用問(wèn)題
如果Store的數據是從后端獲取的。類(lèi)似：
```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']            
})
```

使用后端數據時(shí)， 如何使用value 設置默認值呢？ 首先使用getValue() 獲取選中的值看看， 選中兩個(gè)值，獲取的值類(lèi)似：關(guān)羽,黃忠 ， 也就是以逗號分隔的值。
所以使用value:'關(guān)羽,黃忠', 設置默認值， 發(fā)現無(wú)效。
使用 setValue() 設置值， mytagfield.setValue('關(guān)羽,黃忠'); ， 頁(yè)面同樣沒(méi)有任何顯示，但是使用 getValue() 卻能獲取到值。 也就是， 值設置上了， 但是顯示不了， 怎么辦？
答案就是要增加配置 autoLoadOnValue:true, ， 這個(gè)配置的意思就是在設置值時(shí)， 默認加載后端數據。也就是數據加載后才能顯示下拉項， 有下拉項才能顯示選中的值。
設置的值不會(huì )再下來(lái)單中自動(dòng)反選的解決
可是，接下來(lái)有一個(gè)奇怪的問(wèn)題， 就是在設置默認值之后，** 在點(diǎn)擊下拉選項，默認值并沒(méi)有在下拉選項中反選**， 這樣的話(huà)對于設置的默認值就可以選到兩次，而且通過(guò)下拉選項無(wú)法去除之前設置的默認值， 效果類(lèi)似下圖：

分析這個(gè)原因：
在首次點(diǎn)擊組件時(shí)，會(huì )從后端加載數據， 雖然之前設置默認值的時(shí)候有獲取過(guò)數據， 這里還是會(huì )調用一次， 而且基本找不到可以用來(lái)禁止記載的配置。
通過(guò)源代碼調試到底發(fā)生了什么會(huì )導致刷新Store， 在以下代碼段找到了答案：

queryPlan.query 的值是 “”， me.lastQuery 的值是 false, 如果能在設置值之后將組件的lastQuery 的值設置為“”（空字串） 是否問(wèn)題就解決了？
首先來(lái)看一下lastQuery 的作用：
lastQuery用來(lái)過(guò)濾Store 中的值，把此屬性的值刪除會(huì )導致重新刷新
Combox 類(lèi)型的組件要使觸發(fā)器不清除存儲的過(guò)濾器，可以設置lastQuery 的值為 “” 。
解決方法就是在TagField 的beforequery 事件中設置該值，設置代碼如下：
```javascript
 listeners: {                
	 beforequery: function(tagfield){                    
		 tagfield.combo.lastQuery = '';                
	 }            
 }
```

注意：
以上是 7.x 版本的解法，設置組件的combo的lastQuery 的值。
在6.x 版本中可以直接設置屬性的lastQuery 的值， 而且不限定在beforequery事件中執行，可以在按鈕執行方法中執行， 但是在 7.x 版本中看起來(lái)不行。
### 本篇代碼及在線(xiàn)示例
前端演示
https://osxm.github.io/extjs_dev_ency/#valueselectfielddemo
注意： 取后端數據需要使用啟動(dòng)以下后端代碼的應用才能生效。
后端代碼：
https://github.com/osxm/demoworkspace/blob/master/spring/springboot/src/main/java/cn/osxm/springboot/controller/ExtjsController.java

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

Ext JS下拉單選框(Combobox,TagFied)使用及疑難問(wèn)題解決

網(wǎng)站導航