In a column a of a grid panel I use a combobox as editor and a renderer to display values :

editor: {
    xtype: 'combobox',
    alias: 'bienTypeCombobox',
    store: 'BienTypesStore',
    valueField: 'id_bien_type',
    displayField: 'nom',
    autoHeight: true,
    editable: false,
    autoSelect: true,
    allowBlank: false
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    var display = '';
    Ext.data.StoreManager.get("BienTypesStore").each(

    function (rec) {
        if (rec.get('id_bien_type') === value) {
            display = rec.get('nom');
            return false;
        }
    });
    return display;
}

So, when the cells are edited the combo box is displayed and when the cells are not edited the displayField of this combo box is displayed.

My problem is that for now,, when I click on the header of this column, the rows are sorted by the valueField of the combo box.

I would like to make the user able to sort this column by the displayedField of the combo box.

Please help, thanks

• sorting
• extjs
• combobox
• gridpanel

I don't think there is easy solution for this. The only one way I can think of is the following:

• Create a virtual field in your model (with display field basically). Create convert function for this virtual field, so when it's set real value field is get updated.

• Use this virtual field in the grid without additional rendered

• Use editor for this field with both valueField and displayField pointing to this field.