Extjs EditorGridPanel中ComboBox列的顯示問題

更新時間：2011年07月04日 23:36:52 作者：

EditorGridPanel中嵌入ComboBox通常不會正常顯示ComboBox的store中本想顯示字段，而是顯示的EditorGridPanel中 store的dataindex指定的字段內(nèi)容。

為了解決這個問題需要在EditorGridPanel的ColumnModel中顯示ComboBox的地方使用renderer屬性，重新渲染，方法如下：

 
//部門列表 
var comboxDepartmentStore = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
url: "GetDepartmentJson.aspx", 
method: 'GET' 
}), 
reader: new Ext.data.JsonReader({ 
root: 'data', 
totalProperty: 'totalCount', 
fields: [ 
{ name: 'departmentid', mapping: 'ID' }, 
{ name: 'departmentname', mapping: 'Name' } 
] 

}) 
}); 
//根據(jù)Combobox列表中對應(yīng)的Id的值來渲染 
function rendererMeterTypeCombobox(value, p, r) { 
var index = comboxDepartmentStore.find(Ext.getCmp('cbdepartment').valueField, value); 
var record = comboxDepartmentStore.getAt(index); 
var displayText = ""; 
if (record == null) { 
return value; 
} else { 
return record.data.astype; // 獲取record中的數(shù)據(jù)集中的display字段的值 
} 
} 


var sm = new Ext.grid.CheckboxSelectionModel(); 

var cm = new Ext.grid.ColumnModel({ 
columns: [sm, new Ext.grid.RowNumberer(), { 
header: 'id', 
dataIndex: 'id', 
hidden: true 
}, { 
header: '姓名', 
width: 40, 
dataIndex: 'name' 
}, { 
header: '所屬部門', 
width: 80, 
dataIndex: 'department', 
renderer: rendererDepartmentCombobox, 
editor: new Ext.form.ComboBox({ 
id: "cbdepartment", //必須有 
forceSelection: true, 
selectOnFocus: true, 
typeAhead: true, 
triggerAction: 'all', 
store: comboxDepartmentStore, 
mode: 'local', 
displayField: 'departmentname', 
valueField: 'departmentid', 
lazyRender: true 
}) 
}], 
defaults: { 
zsortable: true, 
menuDisabled: false, 
width: 100 
} 
}); 

var editGrid = new Ext.grid.EditorGridPanel({ 
id: 'TestGrid', 
store: store, //EditorGridPanel使用的store 
trackMouseOver: true, 
disableSelection: false, 
clicksToEdit: 1, //設(shè)置點擊幾次才可編輯 
loadMask: true, 
autoHeight: true, 
cm: cm, 
sm: sm, 
viewConfig: { 
columnsText: '顯示/隱藏列', 
sortAscText: '正序排列', 
sortDescText: '倒序排列', 
forceFit: true, 
enableRowBody: true 
}, 
bbar: new Ext.PagingToolbar({ 
pageSize: 25, 
store: store, 
displayInfo: true, 
displayMsg: '當(dāng)前顯示從{0}至{1}， 共{2}條記錄', 
emptyMsg: "當(dāng)前沒有記錄" 
}) 
}); 