玄幻小说排行榜_[Ext JS]可編輯列Grid的全場(chǎng)景開(kāi)發(fā)| 成都西華升騰科技有限公司

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

CmsWing

[Ext JS]可編輯列Grid的全場(chǎng)景開(kāi)發(fā)

## 可編輯列Grid的全場(chǎng)景開(kāi)發(fā)
### 基本功能描述與實(shí)現
在Grid中，對一列或某幾列批量編輯。編輯效果如下圖：
![](/upload/picture/2022-10-09/upload_9016581ef48db69fac405e201d667632.png)
### 功能實(shí)現的思路如下：
可編輯的列使用 widgetcolumn 類(lèi)型。調用Grid的reconfigure()方法，重新生成新列的Grid。
widgetcolumn列的widget屬性用來(lái)配置編輯組件的類(lèi)型，比如文本輸入框、日期輸入或是下拉單。
編輯組件中輸入的值使用 bind方式與原Store綁定(bind)，也就是store的記錄的值會(huì )顯示在編輯組件中，編輯組件發(fā)生修改時(shí)會(huì )同步更新Store，這樣的好處是獲取修改的部分很簡(jiǎn)單，直接通過(guò)Store就可以獲?。╣etModifiedRecords()）。
### 基本功能實(shí)現
可編輯列的配置示例如下：
```json
{      
	text:'City',  
	dataIndex:'city',  
	flex:1,       
	xtype:'widgetcolumn', 
	widget:{          
		xtype:'combobox',      
		bind:'{record.city}'
	}
}
```

下拉單選項不同的下拉單編輯
一般情況下，下拉單選型固定，直接配置編輯組件的store屬性即可。這個(gè)store的值可以是在前端配置，也可以直接從后端讀取。
但在有的場(chǎng)景下，每一行的值有可能不一樣。在選項值從后端隨Store一起傳入的解法下，在Widget被Attach時(shí)，添加Store到Widget 。使用的配置選項是onWidgetAttach。
值的有效性檢驗
如果要求必須對選擇值得有效性進(jìn)行驗證，比較簡(jiǎn)便得方式是在編輯組件使用： forceSelection:true。該配置會(huì )強制選擇下拉框的值，非法值會(huì )自動(dòng)清空。
綜合以上，編輯列得完整配置：
```json
{        
	text:'City',   
	dataIndex:'city',
	flex:1,   
	minWidth:82,   
	sortable:false,   
	xtype:'widgetcolumn',   
	widget:{         
	xtype:'combobox',   
	bind:'{record.city}', 
	forceSelection:true},   
	onWidgetAttach:function(col, widget, rec){
	var citys = rec.get("citys");
	var cityArray = Ext.decode(citys);  
	widget.setStore(cityArray);
}}
```

### 異常問(wèn)題
以上綜合得場(chǎng)景是： 可編輯列 + 編輯組件是下拉單 + 對輸入的值進(jìn)行有效性驗證。
在數據量不多的狀況下，以上的解法基本完美。但是在筆者的實(shí)際應用中出現了一種狀況：
單行刪除之后，進(jìn)入編輯頁(yè)面的時(shí)候，部分行的值會(huì )丟失。
調試發(fā)現原因：
onWidgetAttach的方法執行了3次，在第一次的時(shí)候一切正常，第二次的時(shí)候Store中的值會(huì )丟失（比如上面的city）。（沒(méi)有和后端交互）
所幸的是值丟失會(huì )被認為Store發(fā)生了修改，會(huì )有紅色提示。
清空，看起來(lái)像是forceSelection:true的行為，　Mark掉這行，問(wèn)題果然解決。但是onWidgetAttach還是被觸發(fā)了３次。
此外，　不使用forceSelection則就沒(méi)有對有效值進(jìn)行驗證。
解決方法：
onWidgetAttach被觸發(fā)３次的原因久尋不得，想到了另外一個(gè)解決辦法。
在保存的時(shí)候檢查有效性。在點(diǎn)擊保存按鈕后，查找所有的下拉單組件，　獲取其值和Store，判斷值是否在Store中，如果不在，則標識無(wú)效。
```json
combobox.markInvalid("Invalid value,please check.");
```

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext JS]可編輯列Grid的全場(chǎng)景開(kāi)發(fā)

網(wǎng)站導航