View Full Version : Editable grid Panels with comboboxes

26 Sep 2012, 2:27 AM

I have an editable grid Panel which includes a column that is displayed as a combobox on edit

The Panel is defined like this :-

var grid = Ext.create('Ext.grid.Panel', {
store : TaskContributorStore,
autoDestroy : true,
minHeight : 300,
width : 800,
title : 'Task Contributors',
frame : true,
columns : [{
header: 'Start Date',
dataIndex : 'START_DATE',
width : 90,
minValue : '01/01/2001',
format: 'd/m/Y',
xtype: 'datecolumn',
field : {
xtype : 'datefield',
allowBlank : false,
format : 'd/m/Y',
minValue : '01/01/2001',
minText : 'Start date cannot be before today!',
maxValue : Ext.Date.format(new Date(), 'd/m/Y')
header: 'Contributor',
dataIndex: 'CONTEXT_X',
flex: 1,
renderer : PersonAgencySearchRenderer,
editor: {
xtype : 'PersonAgencySearchCombo',
allowBlank : false

The store TaskContributorStore is a remote store that passes back the date and the display value for the panel. eg. Date : 26/09/2012
Contributor : Joe Bloggs

When I click the grid to edit, the Contributor column becomes a combobox which itself uses a remote store.
The display value and return values in the remote store are different, so has values such as

displayField : Joe Bloggs
valueField : JB

displayField : John Smith
valueField : JS

If I edit the row and change the Contributor to John Smith from the combobox the data written back to the database is correct, i.e. JS (The valueField).

If I update the row and change only the Start Date, the data written back for the Contributor field is incorrect, i.e. Joe Bloggs (The displayField).

I suspect my problem is that the panel when it initially loaded is only loading with the a value equivalent to the displayField.

Any ideas on the best way to handle this?



28 Sep 2012, 7:51 AM
The store for the grid needs to contain the valueField value not the displayField value.