Extjs 3.4 Combobox does not showing valuefiled data after form submission

Question

I have a xtype: combobox as follows. When I submit form it shows display field value rather than value field. Can you please tell me where is the problem ? Here is my code. When I submit form then in php.

        Ext.onReady(function(){ 
        var store = new Ext.data.SimpleStore({
        fields: ['dataFieldName', 'displayFieldName'],
        data: [['MON', 'Month']],       
        });    
        var fp = new Ext.FormPanel({
        title: 'Check/Radio Groups Example',
        id:'simpleform',
        url:'tt.php',
        frame: true,
        labelWidth: 110,
        width: 600,
        renderTo:'form-ct',
        bodyStyle: 'padding:0 10px 0;',
        items: [{
        store: store,
        fieldLabel: 'ComboBox',
        displayField: 'displayFieldName',   
        valueField: 'dataFieldName',        
        typeAhead: true,
        forceSelection: true,
        mode: 'local',
        triggerAction: 'all',
        selectOnFocus: true,
        editable: true,
        xtype: 'combo',
        }],
        buttons: [{
        text: 'Save',
        handler: function(){                        
        Ext.getCmp("simpleform").getForm().submit({                      
        success: function() { }          
        });         
        }
        }]
        });
        });

In php it shows

  Array
  (
    [vsn] => Month
  )

where as it should shows MON. Can you please tell me where is the issue?

Answer 1

try setting hiddenName property of combobox

If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically post during a form submission.

refer docs