`

Grid中使用的Combobox

阅读更多
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.
请给出你的建议或与我们分享你的改进。
分享到:
评论

相关推荐

    ExtJS PropertyGrid中使用Combobox选择值问题

    在PropertyGrid中遇到的一个常见问题是当使用Combobox(下拉列表框)作为编辑器时,用户选择的值(displayField)与实际保存的值(valueField)不一致。通常,displayField用于显示用户友好的文本,而valueField则是...

    Ext ComboboxGrid

    10. **教程和示例**:描述中提到了博客链接,这可能是介绍ComboboxGrid使用方法的一个资源。访问这个链接可以获取更多关于如何使用和实现ComboboxGrid的实例和指导。 综上所述,"Ext ComboboxGrid"是一个实用的组件...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在实际项目中,你应该根据需求选择合适的库版本,并通过`ext.js`或`ext-dev.js`引入EXTJS的核心库,然后根据需要引入其他组件,比如ComboBox和Grid。 总结来说,EXTJS4的ComboBox可以通过自定义事件处理和组件嵌套...

    Delphi在stringGrid控件中嵌入Combobox下拉框

    同时,设置其Parent属性为StringGrid,这样Combobox就会出现在Grid的相应位置。 4. **处理交互**:在Combobox的OnDropDown事件中,可以设置其可见性,使其只在需要时显示下拉列表。而在OnCloseUp事件中,更新...

    Delphi7StringGrid内动态添加ComBoBox的值

    当用户从ComboBox中选择一个值时,我们需要监听ComboBox的OnChange事件,更新StringGrid对应单元格的值。同时,可能还需要处理ComboBox的OnCloseUp事件,以确保在用户完成选择后,ComboBox不会继续占用单元格。 ```...

    extjs中grid中嵌入动态combobox的应用

    在EXTJS中,将动态Combobox嵌入到Grid中是一种常见的需求,这允许用户在单元格内选择一个下拉列表的值,同时保持数据的关联性。以下是对标题和描述中涉及的知识点的详细说明: 1. **Ext.data.JsonStore**: 这是...

    Winform 属性编辑器 propertyGrid示例 下拉列表框

    在Windows Forms(Winform)开发中,`PropertyGrid`控件是一个非常实用的工具,它允许用户以图形化的方式查看和编辑对象的属性。在某些场景下,我们可能需要为`PropertyGrid`添加自定义的功能,例如展示下拉列表框...

    PropertyGrid 下拉式和弹出编辑框的实现

    在这个方法中,我们可以创建一个`ComboBox`控件,填充其数据源,并在用户选择一个值后将选中的值返回给`PropertyGrid`。 ```csharp public class DropDownEditor : UITypeEditor { public override object ...

    unigui自定义下拉combobox

    在自定义Combobox中,用户可以设置每页显示的选项数量,并通过导航按钮在不同页面间切换,提高数据浏览效率。 4. **关键字搜索**: 关键字搜索允许用户输入文本,快速定位到与输入文本匹配的选项。这种功能对于有...

    WPF combobox button 漂亮样式

    在Windows Presentation Foundation (WPF) 中,ComboBox是一个常用的控件,它结合了下拉列表和文本框的功能,允许用户从预定义的选项中选择或输入自定义值。本篇文章将详细探讨如何为WPF ComboBox创建漂亮的按钮样式...

    DataGrid中加入ComboBox的源码

    当用户在ComboBox中做出选择时,可能需要捕获和处理这些事件,例如SelectionChanged。你可以为ComboBox添加事件处理程序,以响应用户的选择变化,并根据需要更新数据源。 6. **GridCombo源码分析**: "GridCombo...

    C# 简单自绘ComboBox

    在Windows Forms应用中,ComboBox控件是一个常用的组件,它结合了下拉列表和文本输入框的功能。然而,有时我们可能需要对ComboBox的默认外观进行自定义,以满足特定的设计需求。本篇文章将深入探讨如何在C#中实现...

    显示多列的combobox

    在传统的ComboBox中,我们只能看到单一列的数据,通常是键值或文本。然而,当需要显示如ID、名称、价格等多列信息时,就需要对其进行定制化。在C#中,我们可以利用自定义控件或者第三方库来实现这一功能。 首先,...

    flex datagrid 中实现combobox联动

    此外,别忘了在DataGrid的列配置中使用自定义的ComboBox,并正确地设置它们之间的关系。 总结,Flex中实现DataGrid内ComboBox的联动需要掌握事件监听、数据绑定、自定义组件等技术。通过以上步骤,我们可以创建出...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    3. **使用 Grid 作为下拉菜单** - 当 `ComboBox` 的下拉列表需要展示复杂数据结构时,如多列或带有自定义样式的数据,可以使用 `GridComboBox`。 - `GridComboBox` 可以设置为单选或多选模式,根据业务需求选择...

    WPF ComboBox样式

    在Windows Presentation Foundation (WPF) 中,ComboBox是一个常用的控件,它结合了下拉列表和文本框的功能,用户可以输入文字或从下拉列表中选择一个选项。在本主题中,我们将深入探讨如何修改WPF ComboBox的样式,...

    .net C# PropertyGrid 显示下拉列表

    在本文中,我们将讨论如何在 .NET 中使用 PropertyGrid 控件来显示下拉列表,并实现编辑表的各种属性。我们将通过一个自定义控件 CheckedListBoxUC 来实现这个功能。 PropertyGrid 控件是 .NET 中一个功能非常强大...

Global site tag (gtag.js) - Google Analytics