extjs中grid中嵌入動態(tài)combobox的應用

更新時間：2011年01月01日 18:40:46 作者：

今天需要在grid中嵌入combobox，在網上找了好久也沒有找到一個正確可行的方法，可能是版本問題（我版本是extjs 3.0），沒有繼續(xù)研究其原因，自己查找資料，終于實現功能?，F在分享一下代碼。

拿combobox的數據

 
comboDS = new Ext.data.JsonStore({ 
url : 'test.do', 
fields : [{ 
name : 'id' 
}, { 
name : 'display' 
}] 
}); 

combobox定義
combobox 中的id必須要有，后面要跟據id取combobox值。

復制代碼代碼如下:

 
var comboBox = new Ext.form.ComboBox({ 
id : "cb", //必須有 
typeAhead : true, 
readOnly : true, 
allowBlank : false, 
autoScroll : true, 
selectOnFocus : true, 
emptyText : '請選擇...', 
store : comboDS, 
forceSelection : true, 
triggerAction : 'all', 
displayField : 'display', 
valueField : 'id' 
}); 

grid 的定義：

復制代碼代碼如下:

 
ds = new Ext.data.Store({ 
baseparams : { 
start : 0, 
limit : RowCount 
}, 
proxy : new Ext.data.HttpProxy({ 
url :'test2.do' 
}), 
reader : new Ext.data.JsonReader({ 
root : 'data', 
totalProperty : 'totalCount' 
}, [{ 
name : "bh" 
}, { 
name : "test" 
}]); 
}); 
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), { 
header : "編號", 
dataIndex : "bh" 
}, { 
header : "測試", 
dataIndex : "test", 
renderer : renderer, 
editor : comboBox 
}]); 
grid = new Ext.grid.EditorGridPanel({ 
title : '測試', 
ds : ds, 
cm : cm, 
clicksToEdit : 1, 
viewConfig : { 
forceFit : true 
}, 
bbar : new Ext.PagingToolbar({ 
pageSize : RowCount, 
store : ds, 
displayInfo : true, 
displayMsg : '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條', 
emptyMsg : "沒有記錄" 
}) 
}); 

cm 的renderer函數
此方法為解決combobox修改后顯示為id

復制代碼代碼如下:

 
function renderer(value, p, r) { 
var index = comboDS.find(Ext.getCmp('cb').valueField, value); 
var record = comboDS.getAt(index); 
var displayText = ""; 
if (record == null) { 
displayText = value; 
} else { 
displayText = record.data.display;// 獲取record中的數據集中的display字段的值 
} 

您可能感興趣的文章: