Extjs EditorGridPanel中ComboBox列的顯示問題
更新時間:2011年07月04日 23:36:52 作者:
EditorGridPanel中嵌入ComboBox通常不會正常顯示ComboBox的store中本想顯示字段,而是顯示的EditorGridPanel中 store的dataindex指定的字段內容。
為了解決這個問題需要在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列表中對應的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, //設置點擊幾次才可編輯
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: '當前顯示從{0}至{1}, 共{2}條記錄',
emptyMsg: "當前沒有記錄"
})
});
復制代碼 代碼如下:
//部門列表
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列表中對應的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, //設置點擊幾次才可編輯
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: '當前顯示從{0}至{1}, 共{2}條記錄',
emptyMsg: "當前沒有記錄"
})
});
您可能感興趣的文章:
相關文章
解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問題
由于開發(fā)過程中大多用chrome來調試,很少在ie中調試(現(xiàn)在兩者都要兼顧),導致最后在ie中頁面不能正常加載,當時那個囧啊,看到ie報的錯,我都想哭,連出錯的堆棧信息都沒有(這一點,ie做的真不好),無從下手啊2013-01-01extjs關于treePanel+chekBox全部選中以及清空選中問題探討
treePanel+chekBox全部選中以及清空選中,想必大家在學習使用過程中都見過這種效果吧,接下來為大家詳細介紹下實現(xiàn)過程及細節(jié),感興趣的朋友可以參考下哈2013-04-04ExtJS GridPanel 根據(jù)條件改變字體顏色
ExtJS下GridPanel 根據(jù)條件改變字體顏色的實現(xiàn)代碼。2010-03-03ExtJS Grid使用SimpleStore、多選框的方法
ExtJS 中Grid使用SimpleStore、多選框的方法,需要的朋友可以參考下。2009-11-11extjs實現(xiàn)選擇多表自定義查詢功能 前臺部分(ext源碼)
extjs實現(xiàn)選擇多表自定義查詢功能 前臺部分(ext源碼) ,需要的朋友可以參考下。2011-12-12