Extjs4 combobox displayValue in grid

Question

Please, help. I want to show my displayValue in the Grid. I found the solution here, but I can\'t understand how use it. My code:

columns:[...,{         


        

Answer 1

You are missing a celleditor plugin.

It is best if you define the renderer as a reusable object so that you can globally control the behavior of your combo columns.

Since you are using ExtJS4, I added an alternative way to show the displayField of the combo editor in a cell, without having to define the editor outside of the scope of a column.

First define the renderer:

Ext.ns("Ext.ux.util");

Ext.ux.util.ComboRenderer = function(val, metaData){
    var combo = metaData.column.getEditor();
    if(val && combo && combo.store && combo.displayField){
        var index = combo.store.findExact(combo.valueField, val);
        if(index >= 0){
            return combo.store.getAt(index).get(combo.displayField);
        }
    }
    return val;
};

Then give your grid a cellediting plugin:

  plugins: [
    {
      ptype: 'cellediting',
      clicksToEdit: 1
    }
  ]

And finally, assign the ComboRenderer to your column's renderer property like this:

{
  header: 'Product',
  dataIndex: 'prod_id',
  renderer: Ext.ux.util.ComboRenderer,
  editor: {
    xtype: 'combo',
    store: new Ext.data.Store({
        fields: ['value','display'],
        data: prod_list
    })
  }
}

Answer 2

var myStore = new Ext.data.Store({
    fields: ['value','display'],
    data: prod_list
});

...

            editor: {
                xtype: 'combobox',
                store: myStore,
                displayField: 'display',
                valueField: 'value'
            },
            renderer: function(val){
                index = myStore.findExact('value',val); 
                if (index != -1){
                    rs = myStore.getAt(index).data; 
                    return rs.display; 
                }
            }