Extjs4 transform combobox doesn't send value attribute on form submit

Question

I have an ExtJS4 transform combobox inside an HTML form:

<script>   

Ext.onReady(function() {
        Ext.tip.QuickTipManager.init();

        var transformed = Ext.create('Ext.form.field.ComboBox', {
            typeAhead: true,
            transform: 'countrySelect',
            forceSelection: true
        });
    });
  </script>


<form>
 <select  id="countrySelect">
      <option value="AR">Argentina</option>

    </select>

When I submit the form, it sends Argentina instead of AR . What should I do to make extjs send value attribute as selected value?

Answer 1

I understand that you want to submit your form without using Ext...

Give your combo a hiddenName, so that Ext creates a hidden input element, which value will be kept in sync with the value selected in the combo.

In order to prevent the visible input element's value to be read by your form, you'd have to remove its name attribute.

With your example, that gives us:

Ext.create('Ext.form.field.ComboBox', {
    typeAhead: true,
    transform: 'countrySelect',
    forceSelection: true

    // will create a hidden input with the correct value        
    ,hiddenName: 'country'

    // prevent visible input to be included into the submitted data
    ,listeners: {
        afterrender: function() {
            this.inputEl.dom.removeAttribute('name');
        }
    }
});

You may want to pack the last part into an override. That would be:

Ext.define('Ext.ux.ComboBoxPreventDoubleSubmit', {
    override: 'Ext.form.field.ComboBox'
    ,afterRender: function() {
        this.callParent(arguments);
        if (this.hiddenName) {
            this.inputEl.dom.removeAttribute('name');
        }
    }
});