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]

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.

[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.

[skirtle]

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.

forceSelection doesn't prevent typing, it just forces the user to type one of the options from the list. Perhaps that's what you meant but I just wanted to make sure we're clear on that.

With your current configuration you're allowing users to type in a totally arbitrary value. If they type in a value that isn't in the list then it won't have an id. I'm curious to know how that would work in the context of your scenario?

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.

Apologies if you already understand this but I just want to make sure we're clear about the queryMode setting.

queryMode refers to where the data is filtered, not where it came from originally. It's difficult to know from what you've said so far whether or not you should be using 'local' or 'remote' but it's a common mistake to use 'remote' simply because the data is being loaded from a server.

You may find these articles helpful. They don't address your case specifically but they do give an overview of some of the main config options, including working with remote data:

http://skirtlesden.com/articles/extjs-comboboxes-part-1
http://skirtlesden.com/articles/extjs-comboboxes-part-2