HELP: grid combo on blur set valueField

[johnstontrav]

Hi,

Using: Ext 3.2.1

I have a grid combo editor that load remote JSON data. All works fine except after selection of combo is displays the id field.

1. Combo loads fine
--------------------------------------
combo1.jpg


2. Make selection
--------------------------------------
combo2.jpg


3. onBlur the displayField is gone and replace with valueField
--------------------------------------
combo3.jpg

Here is my code:

var myCombo = new Ext.form.ComboBox({
    fieldLabel             : 'myComboBox'
    ,hiddenName        : 'combo_id'
    ,valueField           : 'id'
    ,displayField         : 'descr'
    ,forceSelection     : true
    ,triggerAction       : 'all'
    ,mode                 : 'remote'
    ,store                 : new Ext.data.JsonStore({
        id                : 'id'
        ,root            : 'rows'
        ,fields          : [
                {name:'id', type:'int'}
                ,{name:'descr', type:'string'}
        ]
        ,url            : 'combo.php'
    }) 
});    


var grid = new Ext.grid.EditorGridPanel({
            ...
            ,columns: [
                ...
                {header: 'Combo Name' ,editor: myCombo, dataIndex: 'combo_descr'}
                ...
                ]
                ..
}); 

What am I doing wrong?

[Condor]

You not only need a column editor, you also need a column renderer that displays the description for an id.

[johnstontrav]

You not only need a column editor, you also need a column renderer that displays the description for an id.

Thanks for the hint Condor. I found this blog post that may be what im looking for (not at work atm, so can't test it), but is this what you mean? Do you of any other documentation/examples that explains this concept?


http://www.fusioncube.net/index.php/...t-for-datagrid

function CodeRenderer(val){
    var matching = ItemCodesStore.queryBy(
                      function(rec,id){
                         return rec.item_id == val;
                      });
    return (matching.items[0]) ? matching.items[0].data.item_code : '';
};

// Snippet from ColumnModel of DataGrid
header: 'Code',
dataIndex: 'existingCode',
width: 70,
renderer: CodeRenderer,
editor: new Ext.form.ComboBox({
   mode: 'local',
   displayField: 'item_code',
   valueField: 'item_id',
   store: ItemCodesStore
}) 

[Condor]

This solution is better, but just like your own example, only works on a mode:'local' combobox.