Extjs EditorGridPanel中ComboBox列的顯示問(wèn)題
更新時(shí)間:2011年07月04日 23:36:52 作者:
EditorGridPanel中嵌入ComboBox通常不會(huì)正常顯示ComboBox的store中本想顯示字段,而是顯示的EditorGridPanel中 store的dataindex指定的字段內(nèi)容。
為了解決這個(gè)問(wèn)題需要在EditorGridPanel的ColumnModel中顯示ComboBox的地方使用renderer屬性,重新渲染,方法如下:
//部門(mén)列表
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列表中對(duì)應(yīng)的Id的值來(lái)渲染
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: '所屬部門(mén)',
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è)置點(diǎn)擊幾次才可編輯
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)前沒(méi)有記錄"
})
});
復(fù)制代碼 代碼如下:
//部門(mén)列表
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列表中對(duì)應(yīng)的Id的值來(lái)渲染
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: '所屬部門(mén)',
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è)置點(diǎn)擊幾次才可編輯
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)前沒(méi)有記錄"
})
});
您可能感興趣的文章:
- Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
- ExtJS4給Combobox設(shè)置列表中的默認(rèn)值示例
- Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹(shù)效果(自寫(xiě))
- extjs3 combobox取value和text案例詳解
- Extjs中ComboBox加載并賦初值的實(shí)現(xiàn)方法
- extjs中g(shù)rid中嵌入動(dòng)態(tài)combobox的應(yīng)用
- ExtJS PropertyGrid中使用Combobox選擇值問(wèn)題
- ExtJs使用總結(jié)(非常詳細(xì))
- ExtJS 學(xué)習(xí)專(zhuān)題(一) 如何應(yīng)用ExtJS(附實(shí)例)
- Extjs讓combobox寫(xiě)起來(lái)簡(jiǎn)潔又漂亮
相關(guān)文章
關(guān)于extjs treepanel復(fù)選框選中父節(jié)點(diǎn)與子節(jié)點(diǎn)的問(wèn)題
實(shí)現(xiàn)帶有復(fù)選框的樹(shù),選中父節(jié)點(diǎn)時(shí),選中所有子節(jié)點(diǎn)。取消所有子節(jié)點(diǎn)時(shí),才能取消根節(jié)點(diǎn),感興趣的朋友可以了解下本文2013-04-04
ext combox 下拉框不出現(xiàn)自動(dòng)提示,自動(dòng)選中的解決方法
ext combox 如果想實(shí)現(xiàn)類(lèi)似于 baidu 搜索時(shí)的提示功能。必須禁止其分頁(yè)功能才可以。2010-02-02
解決Extjs4中form表單提交后無(wú)法進(jìn)入success函數(shù)問(wèn)題
form表單提交后無(wú)法進(jìn)入success函數(shù)的問(wèn)題,很是常見(jiàn),下面有個(gè)不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-11-11
Extjs學(xué)習(xí)筆記之一 初識(shí)Extjs之MessageBox
去官網(wǎng)下載好extjs的壓縮包,解壓縮之后得到如下目錄結(jié)構(gòu)。2010-01-01

