1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default Combo box submits display field instead of value field

    Combo box submits display field instead of value field


    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:

    Code:
    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:

    Code:
    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!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,076
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This seems to work for me as expected:

    Code:
    // 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()
    });
    Code:
    ^ Form Dataview URL encoded
      first:fn
      last:ln
      state:AK
    Scott

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default A possible solution

    A possible solution


    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:

    Code:
    //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...

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    Rob Hogan is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


    Quote Originally Posted by Rob Hogan View Post
    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.

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


    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.


  9. #9
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    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.

  10. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Quote Originally Posted by Enrico.Massone View Post
    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?

    Quote Originally Posted by Enrico.Massone View Post
    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