Extjs4 grid editor remote combobox displayValue

Question

I have a grid with some columns for editing. One of the columns must be edited through combobox. The combobox repository is remote and has the type of a pair of key values:

['id', 'title'] 

The value of the mapping field is id, and displayValue is the title. When editing a cell, my combobox loads the repository, selects displayValue, and the Field value returns to the grid editor. Thus, the cell is filled with the Field value.

My question is: how to get a cell to display displayValue? Just picking it from the store is not good enough, because the render happens before the store loads. My code at the moment (works only with local stores):

 { 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

Here is how I did it:

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

As a result, I added a field for storing A - a header for the identifier storeB. And in the grid, I have this header 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; } 

In the grid, I have a listener for the edit event to update the column containing the header with the header from the combo box:

  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!

Answer 2

In model definitions, what is the type of 'id'. If you define as "int", you should:

 index = store.findExact('id', parseInt(value)); 

Answer 3

The value is not the only parameter passed to the visualizer; see the documents: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-renderer

value : object

 The data value for the current cell **metaData** : Object A collection of metadata about the current cell; 

can be used or modified by the visualizer. Recognized properties are: tdCls, tdAttr, and style.

 **record** : Ext.data.Model The record for the current row **rowIndex** : Number The index of the current row **colIndex** : Number The index of the current column **store** : Ext.data.Store The data store **view** : Ext.view.View The current view 

Answer 4

In this answer, add combo storage to your renderer area:

http://jsfiddle.net/WRXcw/3/

 Ext.define('GridModel', { extend: 'Ext.data.Model', fields: [{ name: 'id', type: 'int' },{ name: 'type_id', type: 'int' }] }); Ext.define('ComboModel', { extend: 'Ext.data.Model', fields: [{ name: 'id', type: 'int' },{ name: 'label', type: 'string' }], statics: { TYPE_OPTION_ONE: 1, TYPE_OPTION_TWO: 2, TYPE_OPTION_THREE: 3, TYPE_OPTION_FOUR: 4 } }); var comboStore = Ext.create('Ext.data.Store', { model: 'ComboModel', data: [{ id: 1, label: '1st Option' },{ id: 2, label: '2nd Option' },{ id: 3, label: '3rd Option' }] }); var gridStore = Ext.create('Ext.data.Store', { model: 'GridModel', data: [{ id: 1, type_id: ComboModel.TYPE_OPTION_ONE },{ id: 2, type_id: ComboModel.TYPE_OPTION_TWO },{ id: 3, type_id: ComboModel.TYPE_OPTION_THREE },{ id: 4, type_id: ComboModel.TYPE_OPTION_TWO }] }); Ext.widget('grid', { title: 'Rendering Combos', width: 650, height: 500, renderTo: 'ct', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], store: gridStore, forceFit: true, columns: [{ dataIndex: 'id', header: 'ID' },{ dataIndex: 'type_id', header: 'Type', editor: { xtype: 'combobox', displayField: 'label', valueField: 'id', queryMode: 'local', store: comboStore, allowBlank: true }, renderer: function(value) { var rec = comboStore.getById(value); if (rec) { return rec.get('label'); } return '—'; } }] });