Extjs EditorGridPanel中ComboBox列的显示问题
来源:互联网 发布:淘宝客进入等级 编辑:程序博客网 时间:2024/04/30 06:12
EditorGridPanel中嵌入ComboBox通常不会正常显示ComboBox的store中本想显示字段,而是显示的EditorGridPanel中 store的dataindex指定的字段内容。
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下:
详细出处参考:http://www.jb51.net/article/27609.htm
//部门列表
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' }
]
})
});
//根据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中的数据集中的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: "当前没有记录"
})
});
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下:
详细出处参考:http://www.jb51.net/article/27609.htm
//部门列表
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' }
]
})
});
//根据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中的数据集中的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: "当前没有记录"
})
});
0 0
- Extjs EditorGridPanel中ComboBox列的显示问题
- Extjs EditorGridPanel中ComboBox列的显示问题(默认显示键而不是值)
- extjs的EditorGridPanel中的ComboBox列中显示值的问题
- extjs的EditorGridPanel中的ComboBox列中显示值的问题
- Extjs editorgridpanel combox 显示数据问题
- ExtJS EditorGridPanel中时间日期编辑问题的总结
- ExtJS EditorGridPanel中时间日期编辑问题的总结
- ExtJS EditorGridPanel中时间日期编辑问题的总结
- ExtJS EditorGridPanel 中 时间日期 编辑 问题的总结
- extjs 3.4 实现EditorGridPanel不同行同一列显示不同的Editor
- editorGridPanel++中+有一列使用combobox+,选择后显示的是value+而不是name.+解决方法
- extjs combobox setValue 显示问题
- extjs combobox setValue 显示问题
- Extjs editorgridpanel 没有数据显示
- ExtJS中获取combobox当前选项的显示值
- 显示多列的ComboBox
- extjs定时刷新EditorGridPanel中的某一列
- extjs combobox下拉框显示位置问题
- JavaScript document对象
- scrollview
- UVA10012
- 九种常用设计模式的简单应用
- ios-----提示框第三方库之MBProgressHUD
- Extjs EditorGridPanel中ComboBox列的显示问题
- 关于无限分类的调用问题!
- 正则表达式教程一
- SQL Server: Invalid Column Name
- iOS-----添加三方库的问题
- windows 多线程之原子性
- Spring DM中整合CXF-DOSGi
- objective-C中的description方法
- send mail