Ext Js 下拉框 onchange 后的值为 value 而非 label

Question

我对某些应该很容易解决的问题感到沮丧，但我太过于简单而无法看到它的解决方案 :)

我有一个包含下拉框的网格。这个东西运作良好，并且正确的值通过我的AJAX请求发送，但在我编辑网格行后，下拉框消失了，替代它的是值而不是标签。

editor: new Ext.form.field.ComboBox({
            typeAhead: true,
            lazyRender: true,
            store: new Ext.data.ArrayStore({
                fields: ['contact', 'contactLabel'],
                data: [
                    [1,'Jan'],
                    [2,'Jeroen'],
                    [3,'Mattijs'],
                    [4,'Sven'],
                    [5,'Thomas'],
                    [6,'Yoran']
                ]
            }),
            valueField: 'contact',
            displayField: 'contactLabel',
            hiddenName: 'contact'
        })

当我将组合框更改为“Thomas”时，单元格的值变为“5”，而不是“Thomas”。我认为定义值/显示字段会有所不同，但实际上并没有。有人知道答案吗？

- Dinand Derksen

Answer 1

我不太确定我是否理解正确。如果是这样，你需要一个渲染器。我猜下面代码片段的例子应该能够展示你是否是指的这种情况。

// 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 edit combo
var combo = new Ext.form.ComboBox({
  store: store,
  valueField: "value",
  displayField: "text"
});

请查看这个完整的工作示例（包括单元格编辑和行编辑）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 combo store
var store = new Ext.data.SimpleStore({
  fields: [ "value", "text" ],
  data: [
    [ 0, "Option 0" ],
    [ 1, "Option 1" ],
    [ 2, "Option 2" ],
    [ 3, "Option 3" ]
  ]
});

// 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 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: 'cell'
});
// 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: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: 'row'
});

html

<div id="cell"></div>
<div id="row"></div>

- sra

---

我这里一定漏掉了什么。我得到的是：TypeError: rec is undefined return (rec === null ? '' : rec.get(combo.displayField));顺便说一下，我正在使用rowEditing插件。不知道那是否有任何区别？ - Dinand Derksen

@DinandDerksen 嗯，不应该有任何区别。JSFiddle目前不可用，因此我无法提供带有rowEditing插件的示例。尝试将行rec === null ?更改为rec?并注意boxRender必须知道由编辑器使用的组合框的实例。 - sra

非常感谢您，Sra！我已经按照自己的想法使其正常工作了。唯一需要更改的是存储数组中的键必须标记为字符串，而不是整数。不知何故，当编辑器被激活时，我得到了“3”，而不是“选项3”。无论如何...它通过ajax发送正确的值，并在保存前后正确显示组合框中的值。非常感谢！ - Dinand Derksen

请记住，该解决方案仅在整个商店从数据库加载时才有效。或者至少匹配ID的记录已被加载。例如，指向包含10,000名员工（使用分页）的商店的“员工”组合框有很大机会找不到记录。我目前正在研究更好的解决方案，因为我们的组合框有很多记录，我们不能为每个网格行加载数据。 - cbmeeks

Answer 2

尝试：

data: [
    {contact: 1, contactLabel: 'Jan'},
    ...
]

- Vlad