ExtJS 5 combobox - submitting both value and text

Question

I'm trying to get a simple combobox in ExtJS 5 to submit both the value and text of the selected element. From everything I've read it seems like this should work if I include the hiddenName property for the combo but I cannot get it to submit both.

Here is the relevant combobox config:

                  name: 'myCombo',
                  hiddenName: 'myComboId',
                  submitValue: true,
                  xtype: 'combo',
                  queryMode:'local',
                  valueField: 'id',
                  displayField: 'state',

And here is a jsFiddle with this all set up: fiddle

If you look in firebug/chrome debugger at the request to my fake url when the form is submitted, you'll see that only 'myCombo' is submitted when I'm also expecting 'myComboId'.

Any help would be greatly appreciated, thanks.

Wondering why you need that. The text would be known to the server side anyway identified by the value, no? — Greendrake
It's for an editable combobox so the user can type a new value in the combobox that wouldn't be known by the server side and wouldn't have an ID associated with it. I'd like both the ID and text to be submitted so that I can check the ID first, and if it's blank I know the user has submitted a new value so then I can take the text and add it as a new value to the database. I was under the impression that the hiddenName property allowed you to do this. — zeke
I see. Now look, your fiddle is currently submitting myCombo=newtext for newly created entries, and myCombo=<ID> for existing ones. Why won't you just make the server side see that whenever the value arrived is not an existing ID, it must be a new text value to be added to the database? — Greendrake
Sure, but what if they put in a new value that's numeric? Then the server might incorrectly match a new text value with an existing ID. I mean, yeah, I can make this work using a workaround. But I would like to use hiddenName as I think that's what it's there for... maybe I'm wrong. — zeke
The purpose of hiddenName is quite unclear to me. I can't see why you think it would do what you expect. To accomplish your task I would use the combo's store and save any new records created in there through a proxy — instead of submitting forms and juggling hidden fields. — Greendrake

Tarabass Tarabass · Accepted Answer · 2015-08-15T18:39:55

I would take a hidden field and on select of the combobox I would file the value of the hidden field.

xtype: 'form',
url: 'fakeurl',
scrollable: true,
defaultType: 'textfield',
defaults: {
    fieldLabel: 'some field'
},
items: [{
    name: 'myCombo',
    //hiddenName: 'myComboId',
    xtype: 'combo',
    queryMode:'local',
    valueField: 'id',
    displayField: 'state',
    store: {
        model: 'KitchenSink.model.State',
        data: [
            [0, 'AL', 'Alabama', 'The Heart of Dixie'],
            [1, 'AK', 'Alaska', 'The Land of the Midnight Sun'],
            [2, 'AZ', 'Arizona', 'The Grand Canyon State']
        ]
    },
    listeners: {
        select: function(combo, record, eOpts) {
            var hiddenField = combo.up('form').down('textfield[name=myComboValue]');

            hiddenField.setValue(record.get('abbr'));
        }
    }
}, {
    name: 'myComboValue',
    hidden: true,
    hiddenName: 'myComboValue'
}],
buttons: [{
    text:'Submit',
    handler: function(btn){
        btn.up('form').getForm().submit();
    }
}]

ExtJS 5 combobox - submitting both value and text

1 Answers