`
zl4393753
  • 浏览: 340701 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Editable Grid Combox valueField displayField

阅读更多
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:
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 ExtHelper.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
    };
}

Then, in grid config you can use the same renderer for combo:
 // Your combo definition
        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.

Let me know your suggestions/ improvements.

================= REMOTE COMBOBOX ==================

CeeBee, there are examples in Grid FAQ thread that answer your question. However, let me just summarize how we do it:

Let us say you need CountryId and StateId in your grid. So, we'll add CountryName and StateName as two additional proxy fields in the grid. Now your fields will look something like this:
[{name: 'CountryId', type: 'int'}, {name: 'StateId', type: 'int'}, {name: 'CountryName', type: 'string'}, {name: 'StateName', type: 'string'}];

Now in the grid configuration also, you'll do something like this:
[{header: 'Country', dataIndex: 'CountryId', editor: new Ext.form.ComboBox(), renderer: function(v, m, r) { return r.get('CountryName'); }}]

Then, on selection of combo, to update the country name we add an event handler like this:
grid.on('validateedit', function(e) {
   var dataIndex = e.field;
   switch(dataIndex) {
      case "CountryId":
      case "StateId":
         var combo = grid.getColumnModel().getCellEditor(e.column, e.row).field;
         var displayFieldName = e.field.replace('Id', 'Name');
         e.record.set(displayFieldname, combo.getRawValue());
         break;
   }
});

I hope this helps!



分享到:
评论

相关推荐

    vue-editable-grid:具有编辑模式和单元格导航(如excel)的简单Vue网格

    npm install vue-editable-grid 然后导入您的主文件 import Vue from 'vue' // Vue editable grid component and styles import VueEditableGrid from 'vue-editable-grid' import 'vue-editable-grid/dist/...

    bootstrap-editable.js

    Bootstrap Editable 是一个基于Bootstrap框架的插件,用于在页面上实现元素的就地编辑功能。这个插件允许用户直接在网页上修改文本、链接、日期等数据,而无需跳转到新的表单或者页面。这提升了用户体验,尤其是在...

    combox实现的可编辑下拉框

    const select = document.getElementById('editable-select'); // 监听输入框输入事件 input.addEventListener('input', function() { // 更新下拉框的过滤条件 const filterValue = this.value; Array.from...

    jquery-editable、jqueryUI-editable

    **jQuery Editable与jQuery UI Editable插件详解** 在网页开发中,为了提供更好的用户体验,交互式的元素变得越来越重要。jQuery Editable和jQuery UI Editable是两个非常实用的JavaScript插件,它们允许用户直接在...

    bootstrap3-editable

    Bootstrap3-Editable是一款基于Bootstrap框架的插件,主要用于在Bootstrap表格中实现行内编辑功能。这个插件使得用户可以直接在表格的每一行中编辑数据,而无需跳转到新的页面或者打开模态框,极大地提高了用户体验...

    bootstrap-table-editable.js+bootstrap-editable.js+bootstrap-editable.css

    压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑

    jquery.editable-select

    6. **压缩和非压缩版本**:提供的 `jquery.editable-select.js` 和 `jquery.editable-select.min.js` 分别是未压缩和压缩后的版本。在开发阶段,可以使用未压缩版方便调试,而在生产环境中,压缩版可以减少文件大小...

    bootstrap-editable.zip

    可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...

    editableSelect可编辑搜索的下拉框插件

    【editableSelect可编辑搜索的下拉框插件】 在网页设计和开发中,用户界面的交互性和用户体验至关重要。为了提供更高效、更便捷的输入方式,`editableSelect`插件应运而生。这款插件是一款针对下拉选择框进行增强的...

    bootstrap table editable js

    Bootstrap Table Editable JS 是一个基于Bootstrap框架的动态表格插件,它允许用户在表格的单元格内进行编辑,提供了一种交互式的数据展示和管理方式。这个压缩包包含以下三个核心文件: 1. **bootstrap-editable....

    x-editable行内编辑bootstraptable所需包

    `x-editable`是一个非常实用的库,它允许用户在页面上直接编辑数据,无需跳转到其他页面或弹出窗口。这个库尤其适用于那些希望提升用户体验,提供直观、高效编辑功能的Web应用。在本案例中,我们关注的是`x-editable...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    在本话题中,我们聚焦于Bootstrap Table的一个扩展功能——可编辑下拉框,这得益于`bootstrap-table-editable`插件的使用。这个插件允许用户在表格的单元格内直接进行编辑,包括选择下拉框中的值。 `bootstrap-...

    bootstrap-editable

    下面我们将深入探讨 Bootstrap Editable 的核心特性、使用方法以及如何在实际项目中应用。 首先,Bootstrap Editable 包含了 CSS 和 JavaScript 两个主要部分。CSS 文件用于定义样式,确保编辑控件与 Bootstrap 的...

    streamlit-aggrid examples

    Streamlit网页中功能强大的表格显示与处理组件:streamlit-aggrid 中样例源代码,版本为streamlit-aggrid==0.2.3-2。 文件列表如下: custom_css.py example.py example_highlight_change.py fixed_key_example.py ...

    bootstrap-table-editable.js

    5. **事件监听**:提供了一系列的事件,如 `editable-init`、`editable-save`、`editable-error` 等,开发者可以通过监听这些事件来实现自定义逻辑,如在数据保存前进行额外的校验,或者在数据保存失败时显示错误...

    bootstrap4-editable.7z

    压缩包中的“bootstrap-editable.js”就是实现这一功能的关键文件,它集成了x-editable插件,使得BootstrapTable具备了行内编辑的能力。 首先,我们需要在HTML文件中引入必要的库,包括Bootstrap CSS和JS,...

    bootstrap table的x-editable实现单元格编辑及解决数据为Empty和支持多样式

    X-Editable 是一个与Bootstrap Table集成的插件,用于实现表格内单元格的编辑功能。在本文中,我们将深入探讨如何使用Bootstrap Table的X-Editable特性来实现单元格的编辑,以及如何处理数据为空和自定义样式的场景...

    bootstrap3-editable-1.5.1.zip 就地编辑 ,行内编辑

    Bootstrap3-Editable 1.5.1 是一个用于实现就地编辑(In-Place Editing)功能的库,特别适用于在Web应用中对表格、列表等元素进行快速编辑。这种技术允许用户直接在页面上修改数据,而无需跳转到单独的编辑页面,...

Global site tag (gtag.js) - Google Analytics