Ext Js combobox value after onchange is value instead of label

Question

Just getting frustrated by something that should be an easy fix, but I'm too simple minded to see it :)

I'm having a grid where 1 column is a combobox. The thing works just fine and the correct value is beeing sent through my ajax request, but after I edited the grid row, the combobox disappread and the value that comes into place is not the label, but the value.

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'
        })

So what happens is that when I change the combobox to i.e.. "Thomas", the value of the cell becomes "5", instead of "Thomas". I thought that defining value/display fields would make a difference, but it does not.

Anyone that knows the answer?

Answer 1

I am not quite sure if I got you right. If so you will need a renderer for that. I guess the example below the code snipped should show you if you are meaning such a case.

// 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"
});

See this full working example for both (cellEditing + rowEditing) JSFiddle ()

Here's the complete code

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