Ext的Grid中使用combobox做为编辑控件时,遇到在combobox中选择了相应的选项时(displayField),在grid中却填入了valueField值的问题,困扰了很久,在Extjs官方网站的Forums中看到了一篇关于此问题的article,问题迎刃而解,在此感谢原文作者durlabh。全文的扼要翻译如下
原文位置:
http://extjs.com/forum/showthread.php?t=34691
ComboBox for Grid (combo having local store)
Many people have been having confusion over how to handle rendering of combo boxes having a separate valueField and displayField. This is how we have been using in our applications:
很多人困惑于怎样处理带有valueField和displayField的ComboBoxes渲染问题。这是我们如何在应用中使用ComboBoxes的:
Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.ComboRenderer = function(options) {
var value = options.value;
var combo = options.combo;
var returnValue = value;
var valueField = combo.valueField;
var idx = combo.store.findBy(function(record) {
if(record.get(valueField) == value) {
returnValue = record.get(combo.displayField);
return true;
}
});
// This is our application specific and might need to be removed for your apps
// 这是我们应用中所特定的可能需要从你的应用中移除
if(idx < 0 && value == 0) {
returnValue = '';
}
return returnValue;
};
Ext.ux.renderer.Combo = function(combo) {
return function(value, meta, record) {
return Ext.ux.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
};
}
Then, in grid config you can use the same renderer for combo:
然后,在你的grid配置属性中对于combo可以使用同样的renderer:
// Your combo definition
// 你的combo定义
var addressTypeCombo = Ext.form.ComboBox();
var cm = new Ext.grid.ColumnModel([
{header: 'Type', dataIndex: 'AddressTypeId', width: 100, renderer: Ext.ux.renderer.Combo(addressTypeCombo), editor: addressTypeCombo},
{header: 'Address', dataIndex: 'Address1', width: 130, editor: new Ext.form.TextField({maxLength:50})},
{header: 'Address 2', dataIndex: 'Address2', width: 110, editor: new Ext.form.TextField({maxLength:50})},
{header: 'Address 3', dataIndex: 'Address3', width: 110, editor: new Ext.form.TextField({maxLength:50})},
{header: 'Zip Code', dataIndex: 'PostalCode', editor: new Ext.form.TextField({maxLength:10}), width: 80},
{header: 'City', dataIndex: 'City', width: 80, editor: new Ext.form.TextField({maxLength:20})}]
])
Please note that the above combo box assumes that the store for combo will be local. This approach won't work with remote combos. For remote combo, we update a "proxy" field in the grid store that is used for rendering.
请注意关于combo box假设其store为本地的。此文对于远程combo不适用。远程combo,我们为grid的store中所使用的渲染器替换为"proxy"域。
Let me know your suggestions/ improvements.
请给出你的建议或与我们分享你的改进。
分享到:
相关推荐
问题描述: 在PropertyGrid中使用Combobox来选择值时,得到的应该是displayField的值,但是在确认选择的时候却显示了valueField的值,例如,下拉选择性别,displayField分别为’男’,’女’,对应的valueField分别...
combobox定义 combobox 中的id必须要有,后面要跟据id取combobox值。 代码如下: var comboBox = new Ext.form.ComboBox({ id : “cb”, //必须有 typeAhead : true, readOnly : true, allowBlank : false, autoScro
NULL 博文链接:https://tianhengbao.iteye.com/blog/816208
Delphi为StringGrid网格显示控件中增加下拉框功能,也就是在Grid控件中添加Combobox下拉列表的功能,在任意列显示一个ComboBox功能,如演示截图所示,可大大扩展Grid的功能。生成列表: with Sender as TComboBox ...
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
C# 简单自绘ComboBox http://topic.csdn.net/u/20120706/10/45dfa557-7670-4044-8ebc-a17478b29e6c.html
flex datagrid 中实现combobox联动,这是我写的一个简单的例子供大家一起学习进步。希望对你们有所帮助。
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
在StringGrid内指定列调出Combobox并给Grid赋值
引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存,此时显示的是value值,而不是text值,这时使用格式化函数解决此问题。...
官方有一个关于Grid CURD 的例子:http://examples.coolite.com/Examples/GridPanel/WebService_Connections/HandlerUsing/ 我在其基础上稍微修改一下, 用ComboBox作为Grid的Editor: 先show一下效果给大家坚持...
WPF使用Grid绘制的DataGrid。可以合并单元格,合并表头,自定义单元格的显示控件(TextBox、TextBlock、ComboBox、CheckBox、DatePicker),为单元格绑定自定义计算公式(四则运算、三元运算、if\else表达式运算),...
ComboGrid(下拉grid),ajax实时数据抽取,键盘上下回车等进行数据选取,代码很简洁,希望能帮助大家,(内置jqgrid,combobox-ajax等控件使用,很全面),希望能帮到大家,有疑惑的地方请留意,大家一起探讨
DEV控件中的ComboBoxEdit控件绑定数据库中的数据,主要的绑定方式下拉框中显示Name,但是在选中使用时,使用的是对应的ID。
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ... private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) { } } }
Grid1.ComboBox(4).AddItem "男" Grid1.ComboBox(4).AddItem "女" Grid1.Column(5).CellType = cellCalendar Grid1.Column(1).Locked = True End Sub Private Sub asPopup2_Click(Cancel As Boolean) Grid1.Visible ...