Combobox Extjs4网格编辑器远程组合框显示值

我有一个网格，其中有一些列需要编辑。其中一列应通过组合框进行编辑。combobox存储是远程的，属于键值对类型：

['id', 'title']

组合框值字段是id，显示值是title。编辑单元格时，“我的组合框”将加载存储，选择displayValue并将valueField返回到网格编辑器。因此，单元格中会填充valueField

我的问题是：如何让单元格呈现displayValue？仅仅从存储中选择它是不够的，因为渲染发生在加载存储之前。我目前的代码（仅适用于本地商店）：

---

值不是传递给渲染器的唯一参数请参见文档：

值：对象

The data value for the current cell
**metaData** : Object

A collection of metadata about the current cell; 

可以由渲染器使用或修改。公认的属性有：tdCls、tdAttr、， 和风格

**record** : Ext.data.Model

The record for the current row
**rowIndex** : Number

The index of the current row
**colIndex** : Number

The index of the current column
**store** : Ext.data.Store

The data store
**view** : Ext.view.View

The current view

我就是这样做的：

我有2个存储区，storeA用于网格，storeB用于要选择的值（如上所述）。两个商店都有一个来自storeB的ID

最后，我在storeA中添加了一个字段—storeB ID的标题。在网格中，我将此标题作为隐藏列。在组合框编辑器列中，我使用以下渲染器：

  renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
       //Title is the title for the storeB ID
       return store.data.items[rowIndex].data.title;
  }

在网格上，我有一个用于编辑事件的侦听器，用于使用组合框中的标题更新包含标题的列：

  grid.on('edit', function(editor, e, eOpts ) {
       grid.store.data.items[e.rowIdx].set('title', editor.editors.items[0].field.rawValue)
  })

---

希望这对其他人有帮助

在模型定义中，“id”的类型是什么。如果定义为“int”，则必须：

index = store.findExact('id', parseInt(value));

---

下面是答案，将组合存储带到渲染器的范围内：

  renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
       //Title is the title for the storeB ID
       return store.data.items[rowIndex].data.title;
  }

---

如何使用其他参数更新渲染器？谢谢

Ext.define('GridModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'type_id',
        type: 'int'
    }]
});

Ext.define('ComboModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'label',
        type: 'string'
    }],
    statics: {
        TYPE_OPTION_ONE:   1,
        TYPE_OPTION_TWO:   2,
        TYPE_OPTION_THREE: 3,
        TYPE_OPTION_FOUR:  4
    }
});

var comboStore = Ext.create('Ext.data.Store', {
    model: 'ComboModel',
    data: [{
        id: 1,
        label: '1st Option'
    },{
        id: 2,
        label: '2nd Option'
    },{
        id: 3,
        label: '3rd Option'
    }]
});

var gridStore = Ext.create('Ext.data.Store', {
    model: 'GridModel',
    data: [{
        id: 1,
        type_id: ComboModel.TYPE_OPTION_ONE
    },{
        id: 2,
        type_id: ComboModel.TYPE_OPTION_TWO
    },{
        id: 3,
        type_id: ComboModel.TYPE_OPTION_THREE
    },{
        id: 4,
        type_id: ComboModel.TYPE_OPTION_TWO
    }]
});

Ext.widget('grid', {
    title: 'Rendering Combos',
    width: 650,
    height: 500,
    renderTo: 'ct',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    store: gridStore,
    forceFit: true,
    columns: [{
        dataIndex: 'id',
        header: 'ID'
    },{
        dataIndex: 'type_id',
        header: 'Type',
        editor: {
            xtype: 'combobox',
            displayField: 'label',
            valueField: 'id',
            queryMode: 'local',
            store: comboStore,
            allowBlank: true
        },
        renderer: function(value) {
            var rec = comboStore.getById(value);

            if (rec)
            {
                return rec.get('label');
            }

            return '—';
        }
    }]
});