Combo box submits display field instead of value field

[Enrico.Massone]

Hi guys,
I have a problem with a combo box contained in a form: I expect that it submits 'value field', but it actually submits display field.
This is the code to define the combo box:

xtype: 'combobox',
fieldLabel: 'Company',
name: 'customer_id',
allowBlank:false,
afterLabelTextTpl: required,
id: 'customer_id_combo',
hiddenName : 'customer_id',
store:  customer_store,
valueField: 'id',		
displayField: 'company',
typeAhead: true,
queryMode: 'remote'

Finally, here's the code to submit form containing the combo box we're talking about:

buttons: [{
    text: 'Update branch',
    handler: function() {
        var form=this.up('form').getForm();
	if (form.isValid()) {
	    Ext.Msg.alert('Wait', 'Data are being saved...');
	    form.submit({
	        clientValidation: true,
		url: 'controller/crud.php?a=u&item=branch', 
		success: function(form, action) {
		    Ext.MessageBox.alert('Success','branch was updated');
		    Ext.Function.defer(Ext.MessageBox.hide, 2000, Ext.MessageBox);
		    branch_store.load();
		},
		failure: function(form, action) {
		    Ext.Msg.alert('Error','an error occured');
		}
	   });
	}
	else{
	    Ext.Msg.alert('Error','form is not valid');
	}
}
}]

Does anyone know how to fix that code in order to submit 'value field' instead of 'display field' ?
Thanks in advance!

[scottmartin]

This seems to work for me as expected:

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    },{
        xtype: 'combo',
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        name: 'state'
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            console.log(form);
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                       console.log(form);
                       console.log(action);
                    },
                    failure: function(form, action) {
                       console.log(form);
                       console.log(action);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});

^ Form Dataview URL encoded
  first:fn
  last:ln
  state:AK

Scott

[Enrico.Massone]

Good morning Scott,
thanks for replying my question!
Your code is ok, but unluckily it doesn't help me to solve my problem.
I'm not sure a hundred percent, because I'm a newbie to javascript programming, but I can't see great differences among your and mine way to define the combo box.
Only difference is you wrote:

xtype: 'combo'

while I wrote:

xtype: 'combobox'

I tried to change that configuration in my code, but it still doesn't work
Do you have any idea of reason of this strange behaviour ?
It amazes me, because I did other combos the same way and they work perfectly.

Regards.

Enrico

[Enrico.Massone]

I've found a possible solution for this matter, it isn't very elegant because it performs a forcing, but it makes the form work correctly during submit.
Here's the code, I hope it could be useful to someone:

//function to fetch customer's id by knowing customer's name 
	
	function FetchIdFromName (name){
		var rec = customer_store.findRecord('company',name);
		var id = rec.get('id');
		return id;
	}
//code to set a new value into form's field
    var form=this.up('form').getForm();
    var customerId = FetchIdFromName(form.findField('customer_id').getValue());
    form.findField('customer_id').setValue(customerId);
//now submit form...

[Rob Hogan]

It doesn't look like there's any need for you to use the 'hiddenName' config, and having it set the same as your 'name' config could be causing issues. I'd try removing that.

[skirtle]

You have a displayField and a valueField configured but you don't have forceSelection set to true. That doesn't make much sense to me. I would guess that this, combined with queryMode: 'remote', is causing a new record to be added to the store as the user types. This new entry won't have the appropriate valueField so it'll just be submitted exactly as typed.

[Enrico.Massone]

Hi skirtle,
thanks for your tip, but I believe this is not my case.
If I set 'forceSelection' to true I force the user to select one of combo's items and prevent the possibility that user types something in the combo, without selecting an item.
When I test my app (and detect the problem subject of this conversation) I always select an item from combo, without typing anything in it.
The config option 'query mode: remote' is due to the fact that data store isn't local, it is loaded via an ajax request to the server.

[Enrico.Massone]

You have a displayField and a valueField configured but you don't have forceSelection set to true. That doesn't make much sense to me. I would guess that this, combined with queryMode: 'remote', is causing a new record to be added to the store as the user types. This new entry won't have the appropriate valueField so it'll just be submitted exactly as typed.

Hi skirtle,
thanks for your tip, but I believe this is not my case.
If I set 'forceSelection' to true I force the user to select one of combo's items and prevent the possibility that user types something in the combo, without selecting an item.
When I test my app (and detect the problem subject of this conversation) I always select an item from combo, without typing anything in it.
The config option 'query mode: remote' is due to the fact that data store isn't local, it is loaded via an ajax request to the server.

[Enrico.Massone]

It doesn't look like there's any need for you to use the 'hiddenName' config, and having it set the same as your 'name' config could be causing issues. I'd try removing that.

Hi Rob and thanks for intervening in this discussion, I appreciate all suggestions
I've set up config option 'hiddenName' because yesterday I found a blog about ext js combo box where a user suggests to use that option to be sure that combo submits valueField instead of displayField.
There was a code snippet where 'hiddenName' and 'name' were the same, so I tried to reproduce that in my code.
I know this isn't a good way to write code, the best would be solve problems by reading api docs.