Set the value of an ExtJS ComboBox to an Object, not an object property

Question

I have a ComboBox in an EditorGrid. I am populating it (trying) using JSON, which is produced by serializing an IList<FertilizerType>. I want the valueField of the ComboBox to be equal to the FertilizerType objects and the displayField equal to FertilizerType.Name

Here is a Crop:

{\"Id\":1300,\"Active\":true,\"Code\":\"Ammonium Bicarbonate\",\"Description\":\"Ammonium Bicarbonate\",\"GroupName\":\"FertilizerType\",\"Name\":\"Ammonium Bicarbonate\",\"Ordinal\":1}

Why do I want to set the valueField to an object you might ask? Well, all the data in the grid is part of a Crop object. The ComboBox needs to return a FertilizerType so that Crop.FertilizerType can be populated.

Here is my Column definition:

{
            header: 'Fertilizer Type',
            dataIndex: 'FertilizerType',
            width: 170,
            editor: new Ext.form.ComboBox({
                store: new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({
                        url: Cbp.baseUrl + 'Controller/GetFertilizerTypes'
                    }),
                    reader: new Ext.data.JsonReader({}, ['FertilizerType', 'FertilizerType.Name']),
                    remoteSort: false
                }),
                valueField: 'FertilizerType',
                displayField: 'FertilizerType.Name',
                hiddenName: 'FertTypeObject',
                mode: 'remote',
                minChars: 0
            })
        }

Thanks for any help! This is driving me nuts!

Answer 1

I solved this problem by replicating the C# objects in javascript. Now they post to the server correctly.