Question

I am using ExtJs in my application and I have a grid which has a unique column. This column has an editor which is a combobox, so when I click in a grid cell one combobox is shown. However when I click to edit the grid cell value the name of my object is visible, but when I click outside the cell the value that is render in my grid is the id of object.

When I choose the item:

When I click outside the combobox:

My code:

Ext.define('ComboBoxDoenca', {
extend : 'Ext.form.ComboBox',
displayField: 'nome',
editable: false,
width: 300,
valueField: 'id',
listeners:{
    render: function(combo){
        combo.store = Ext.create('ComboStore').load();
    }
}

});

Grid Code:

Ext.define('GridDoenca', {
extend : 'Ext.grid.Panel',
title: 'Doenças',
alias : 'widget.doencaList',
id: 'gridDoenca',
height: 150,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
})],
initComponent : function() {
    var comboDoenca = Ext.create('Hemisphere.view.fungicida.ComboBoxDoenca');
    me = this;
    Ext.apply(this, {
        dockedItems : [ {
            xtype : 'toolbar',
            dock : 'top',
            items : [ {
                text : 'Add Doença',
                icon : Webapp.icon('add1.png'),
                iconAlign : 'top',
                action : 'addDoenca'
            }]
        } ]
    });

    this.columns = [ {
        header : 'ID',
        dataIndex : 'id',
        hidden: true
    },{
        header : 'Doença',
        dataIndex : 'id',
        editor: comboDoenca,
        flex: 1
    }];
    this.callParent(arguments);
}

});

Anybody could help me??

Answer 1

Well, grid column display the real value assigned to it. That means that internally, data is been assigned perfectly.

The problem you have is you don´t want to see the id value but its friendlier representation instead. That can be solve with the renderer function.

Please, take a look at my example here: http://jsfiddle.net/lontivero/aP4Kg/

I have defined my data store as follow:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"1", "email":"[e-mail]", "phone":"555-111-1224"},
        {"name":"2", "email":"[e-mail]", "phone":"555-222-1234"},
        {"name":"3", "email":"[e-mail]", "phone":"555-222-1244"},
        {"name":"4", "email":"[e-mail]", "phone":"555-222-1254"}
    ]
});

And this is the names store for my combobox:

var names = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data : [
        {"id":"1", "name":"Bart"},
        {"id":"2", "name":"Homer"},
        {"id":"3", "name":"Marge"},
        {"id":"4", "name":"Lisa"}
    ]
});

As you see in the first store, the “name” field contains an id but, of course, I don´t want to see those numbers, I want to see Bart, Homer, Marge or Lisa.

Then, in the renderer function I transform those ids in names to display them.

renderer: function(value) {
    var idx = names.find('id', value)
    var rec = names.getAt(idx);
    return rec.get('name');                    
}    

I hope this is waht you are looking for.