View Full Version : Editable grid display value for default combobox

5 Dec 2014, 8:17 AM
I have an editable grid that has a combobox. When adding a new row to the grid, I have a default value that I set when adding the item to the store. I'd like to be able to show the label and not the value on the grid. I have a renderer on the combo box which searches the combobox's store and grab the label to render. This works fine when a value is selected from the grid, but does not work on the initial display with the default value being set. I've tried to do some things on the 'beforeedit' but I'm fairly new to extjs so I'm a bit stuck. Does anyone have any suggestions on how to achieve this?

5 Dec 2014, 9:02 AM
So you have a renderer on the grid cell when in view mode?
Do you have a valueField and a displayField for you combo to handle that is displayed in edit mode?

Perhaps a quick example would help:

5 Dec 2014, 9:36 AM
Hi Scott, I'm not sure if I'm already doing what you're asking. Perhaps not. How do you specify a renderer under edit mode?

I'm having some troubles with fiddle. But here's along the line of what I have.

Ext. define('mygrid', {
exend: 'Ext.grid.Panel',
alias: 'widget.mygrid',

plugins: [
clickstoedit: 2,
ptype: 'rowediting'

initComponent: function() {
var comboStore = new Ext.data.Store({
fields: ['value', 'label'];
data: [
{value: 1, label: 'option 1'},
{value: 2, label: 'option 2}

Ext.apply(this, {
columns: [
text: 'Column 1',
dataIndex: 'col1',
text: 'Column 2',
dataIndex: 'col2',
editor: {
xtype: 'combobox',
store: comboStore,
displayField: 'label',
valueField: 'value'
renderer: function(val, meta, record, rindex, cindex, store) {
var indx = comboStore.find('value', val);
return idx !== -1 ? comboStore.getAt(idx).get('label');

tbar: [ {
itemId: 'addRow',
text: 'Add Row'
handler: function(button) {
var rowEditing = button.up('gridpanel').getPlugin('rowediting');

var r = Ext.create('myModel', {
col1: 'Default Name',
col2: '1' // option 1


5 Dec 2014, 9:48 AM
See if this helps:

5 Dec 2014, 11:29 AM

This example helps clarify some things, but I'm still unable to achieve the result I'm looking for. When I add a new row with the default value, the value shows up in the combo and not the label. However if I select a different value in the combo, the label is displayed AND when I add another row (with the same default value) the label is also displayed correctly in that new row. It seems that I need to give it a "kickstart", but how do I do this in the code? :-?

5 Dec 2014, 11:41 AM
Per my example, I made the following changes:

// assign var to store create

var store = Ext.create('Ext.data.Store', {

// after grid

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
store.insert(0,{type: 2, name: 'Sencha', email: '[email protected]', change: 1000});

When I add the record, I see the names in combo no value.

5 Dec 2014, 12:22 PM

I think I see where my problem is. I am actually loading my store from a URL. I know my example earlier shows the data being local but it's because I didn't think it made a difference and I just wanted to simplify things a bit.

So when I switched the store using local data, as in your example, it works perfectly. Though, what I really have is this.

var comboStore = new Ext.data.Store({
fields: ['value', 'label'],
autoload: true,
proxy: {
type: 'ajax',
url: 'myService',
reader: {
type: 'json'

So why would this make a difference?

5 Dec 2014, 1:01 PM
Please see the following using json files for all data:

Any change if you set queryMode to local and remove your combo renderer?

I would need to see a fiddle example that duplicates what you see.