ExtJS 5 combobox - submitting both value and text

问题:

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.

回答1:

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();
    }
}]