ExtJS 4.2网格单元格编辑如何将列值与组合显示值绑定

我有一个网格与cellediting插件

我的一列是

int

字段，它在编辑单元格时表示组合存储中的值

我想知道在编辑单元格之前，如何让此列显示displayfield而不是值

以下是供参考的图片：

值2,0,0等是我的“accesstype”字段，它是一个int

如果单击单元格进行编辑，则会得到以下结果：

如果我选择了一个值，那么我会再次得到int值，而不是显示文本

如何显示显示字段而不是值字段

---

为了便于访问，以下是来自以下网站的答案：

您可以为组合设置默认值。然后应该在启动时得到渲染

使用单元渲染器将组合的displayField渲染到网格中。下面是一个可以在其中一个API代码框中张贴的工作示例

工作

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone', 'id'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224","id": 0},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234","id": 1},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244","id": 2},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254","id": 3}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
  return function(value) {
    var idx = combo.store.find(combo.valueField, value);
    var rec = combo.store.getAt(idx);
    return (rec === null ? '' : rec.get(combo.displayField) );
  };
}
// the combo store
var store = new Ext.data.SimpleStore({
  fields: [ "value", "text" ],
  data: [
    [ 1, "Option 1" ],
    [ 2, "Option 2" ]
  ]
});
// the edit combo
var combo = new Ext.form.ComboBox({
  store: store,
  valueField: "value",
  displayField: "text"
});


// demogrid
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'},
        {header: 'id', dataIndex: 'id', editor: combo, renderer: comboBoxRenderer(combo)}
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

---

只需删除该组合的配置属性“valueField”，它将在从下拉列表中选择值后显示displayField值。

使用列渲染器查找值。这是唯一的方法吗？这会影响性能吗？您正在寻找