本文轉自:http://kandy0619.blog.163.com/blog/static/64344345200961495742175/
在gird中加入comboBox(下拉列表)來實現選擇comboBox的值來補充grid(表格)單元格中的值,這是一種富客戶端的表現,可以大量減少用戶的輸入,提高用戶的工作效率。
然而在初學Ext的時候,會經常遇到一個問題:如何使得用戶在comboBox中選擇的值顯示在grid中?
1、 問題來源:
在grid的單元格中加入comboBox,當用戶選擇comboBox的時候,comboBox會將對應的valueField的值傳給grid,grid將這個值顯示出來。比如:
1 男
2 女
上面是一個下拉列表的值,1和2是ID,應該對應comboBox的valueField屬性,而男和女是名稱,應該對應comboBox的displayField。ps:ext中的comboBox與html的不一樣,不過可以這樣來看待:ext.comboBox中的valueField對應html.select的value,而displayField對應innerHTML。
按道理來說,是應該這樣設計的。但是由於comboBox的放在grid中的,這樣會出現一種現象:當用戶選擇comboBox之後,比如說:女。comboBox給gird的值就應該是對應的ID:2。那麼grid就會把2顯示在grid的單元格中。(想放圖上來,發現網易的圖片上傳用不了,算了~)
客戶當然不希望顯示在grid中的數據是他所不明白的,所以問題就出來了:怎麼使得comboBox選擇之後,返回到grid中的值是displayField的值,而不是valueField的值呢?
2、解決辦法:加入renderer
代碼如下:
var colM = new Ext.grid.ColumnModel( [
{
header :"編號",
dataIndex :"deal_id",
sortable :true,
width :100
},
{
header :"工序",
dataIndex :"process_name",
sortable :true,
width :200,
editor :new Ext.form.ComboBox( {
id :"combo_process",
store :store_process,
valueField :"process_id",
displayField :"process_name",
forceSelection :true,
typeAhead :true,
triggerAction :'all',
selectOnFocus :true,// 用戶不能自己輸入,只能選擇列表中有的記錄
allowBlank :false
}),
renderer : function(value, cellmeta, record) {
//獲取當前id="combo_process"的comboBox選擇的值
var index = store_process.find(Ext
.getCmp('combo_process').valueField, value);
var record = store_process.getAt(index);
var displayText = "";
// 如果下拉列表沒有被選擇,那麼record也就不存在,這時候,返回傳進來的value,
// 而這個value就是grid的deal_with_name列的value,所以直接返回
if (record == null) {
//返回默認值,這是與網上其他解決辦法不同的。這個方法纔是正確的。我研究了很久才發現。
displayText = value;
} else {
displayText = record.data.process_name;//獲取record中的數據集中的process_name字段的值
}
return displayText;
}
},
}]);
上面的代碼請看清楚,網上有很多都是錯的。網上的例子對record==null或者空的時候,沒有作出判斷,導致返回到grid的值是空字符串。這樣會導致另一個問題,就是初始化grid的時候,加入了comboBox的列不會顯示數據。
if (record == null) {
//返回默認值,這是與網上其他解決辦法不同的。這個方法纔是正確的。我研究了很久才發現。
displayText = value;
}
這一段代碼可以解決。爲什麼會導致這個問題呢?原因是修改renderer之後,返回的值是從comboBox中獲取來的,可以初始化的時候,comboBox並沒有選擇值,可以說,並沒有初始化,所以renderer返回的是空的。於是grid中就不顯示值,或者說顯示空值。
我修改的代碼是當comboBox返回空的時候,將返回的值設置成傳進來的value,也就是grid給comboBox的值,也就是我們數據庫中的數據。
問題解決,折騰了兩天。希望能夠幫助到想學extjs的朋友,網上都是copy copy的,一錯就都錯了。覺得是一種失敗!能夠驗證出來改錯的人,怎麼就這麼少。要是能多一點這樣的人,我們的網絡將會是一本新的《十萬個爲什麼》。呵呵~~希望如此!