ComboBox: Empty string sent on POST when it's valueField is numeric. How can I pass null to Server?

Question

All,

I am getting a cast exception when attempting to create a new record via a POST using Extjs' JSONStore. The exception happens when an empty string is passed to the server and the server attempts to convert it into an Integer. The comboBox's valueField is set to an int defined field. The datastore fields are as follows:

  fields: [
            { name: 'id', type: 'int' },
            { name: 'displayOrder', mapping: 'displayOrder', type: 'int' },
            { name: 'displayName', mapping: 'displayName', type: 'string' },
            { name: 'enabled', mapping: 'enabled', type: 'boolean' },
            { name: 'letterCode', mapping: 'letterCode', type: 'string' }
        ],

the combobox definition is:

 {
                xtype: 'combo',
                id:"secondaryIncidentCombo",
                hiddenName: 'secondaryIncidentTypeId',
                forceSelection: true,
                width:"200",
                selectOnFocus: true,
                emptyText: 'Secondary Incident',
                editable: false,
                mode: 'local',
                displayField:   'displayName',
                valueField:     'id',
                store: this.secondaryIncidentTypeArrayStore,
                triggerAction: 'all'
            },

The JSONStore used to send the POST is, oddly enough, sending the value of the combobox as an empty string, even though I've configured the JSONWriter not to send unchanged fields:

 writer: new Ext.data.JsonWriter({
            encode: false,   
            writeAllFields:false
        }),

And the POST value sent to the server: ....,"secondaryIncidentTypeId":"",... <-- notice the empty string after the colon.

Here is the secondaryIncidentTypeArrayStore:

    secondaryIncidentTypeArrayStore: new Ext.data.ArrayStore({
    idProperty: 'id',
    fields: [
        { name: 'id', mapping: 'id', type: 'int' },
        { name: 'displayOrder', mapping: 'displayOrder', type: 'int' },
        { name: 'displayName', mapping: 'displayName', type: 'string' },
        { name: 'enabled', mapping: 'enabled', type: 'boolean' },
        { name: 'letterCode', mapping: 'letterCode', type: 'string' }
    ],
    data: []
})

I'm on the verge of writing a manual check for an empty string and setting it to null if the string is empty. This seems pretty kludgy. What's the correct way to send either nothing back or a null value to the server on form submit?

Thanks!

wombleton wombleton · Accepted Answer · 2010-11-30T02:24:25

What's happening is that because the type of your id field is integer it's coercing it into an integer. A falsy value will therefore be 0.

If you remove the type it won't do any conversion, and won't add the id when it's undefined.

e.g.

new Ext.data.ArrayStore({
  idProperty: 'id',
  fields: [
    { name: 'id', mapping: 'id' },
    { name: 'displayOrder', mapping: 'displayOrder', type: 'int' },
    { name: 'displayName', mapping: 'displayName', type: 'string' },
    { name: 'enabled', mapping: 'enabled', type: 'boolean' },
    { name: 'letterCode', mapping: 'letterCode', type: 'string' }
  ],
  data: []
})

If you have to send id=null to get the backend to behave one way of dealing with it is to add a custom Ext.data.Type.

Other ways to solve it are also available if neither of those take your fancy.

EDIT: Aha! Try the allowNull property.

ComboBox: Empty string sent on POST when it's valueField is numeric. How can I pass null to Server?

1 Answers