Question

I have a grid with some columns to be edited. One of the columns should be edited through a combobox. The combobox store is remote and is of a key value pair type:

['id', 'title']

The combobox valueField is id and the displayValue is title. When editing a cell my combobox loads the store, the displayValue is selected and the valueField is returned to the grid editor. So the cell is then filled with the valueField.

My question is: how do I get the cell to render the displayValue? Just selecting it from the store is not good enough since the render happens before the store is loaded. My code for now (that works with local stores only):

{
    header: 'Column title',
    dataIndex: 'id',
    displayField: 'title',
    editor: {
        xtype: 'combo',
        valueField: 'id',
        store: 'myStore',
        displayField: 'title'
    },
    renderer: function(value) {
        //How do I find the editors combobox store?
        store = new myStore();
        index = store.findExact('id', value);
        if (index != -1) {
            rs = store.getAt(index).data;
            return rs.title;
        }
        return value;
    }
}

Answer 1

This is how I did it:

I have 2 stores, storeA for the grid and storeB for the value to be selected (as described above). Both stores have an ID from storeB.

I ended up adding a field to storeA – the title for storeB ID. And in the grid i have this title as a hidden column. And in the combobox editor column i use this renderer:

  renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
       //Title is the title for the storeB ID
       return store.data.items[rowIndex].data.title;
  }

On the grid I have a listener for the edit event to update the column containing the title with the title from the combobox:

  grid.on('edit', function(editor, e, eOpts ) {
       grid.store.data.items[e.rowIdx].set('title', editor.editors.items[0].field.rawValue)
  })

Hope this helps someone else!