Sort comboboxes of a gridpanel column

Go To


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 = '';"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

2012-04-04 21:28
by Metafr
How come you are using a renderer in addition to specifying a displayField and valueField - Arun V 2012-04-04 23:15
@ddrmaxgt37 - it's fine. they are independen - sha 2012-04-10 00:50


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.

2012-04-10 00:45
by sha