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

Posted 2023-02-26

【中文标题】ExtJS 4.2网格单元格编辑如何将列值与组合显示值绑定

【英文标题】：ExtJS 4.2 grid cellediting how to bind column value with combo display value

【发布时间】：2014-08-17 00:39:53

【问题描述】：

我有一个带有单元编辑插件的网格。

我的一个列是 int 字段，它表示编辑单元格时组合存储中的值。

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

以下是图片供参考：

值 2,0,0 等是我的“访问类型”字段，它是一个 int。

如果我单击单元格来编辑我得到的原因：

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

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

【问题讨论】：

使用列渲染器来查找值。

是唯一的办法吗？这会影响任何性能吗？

你在找something like this

【参考方案1】：

为了方便访问，这里是other question的答案：

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

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

工作JSFiddle

Ext.create('Ext.data.Store', 
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone', 'id'],
    data:'items':[
        "name":"Lisa", "email":"[e-mail]", "phone":"555-111-1224","id": 0,
        "name":"Bart", "email":"[e-mail]", "phone":"555-222-1234","id": 1,
        "name":"Homer", "email":"[e-mail]", "phone":"555-222-1244","id": 2,
        "name":"Marge", "email":"[e-mail]", "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()
);

【参考方案2】：

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