GeoExt: Change Filter via changing field name

Question

In GeoExt 2, I have a form with one field and 2 radio buttons. I coded radio buttons to change name of that field to correspond with the convention of GeoExt.

items: [
    {
        xtype: "numberfield",
        itemId: 'parcel',
        name: 'parcelAtt__ge',
        fieldLabel: 'Parcel Number:'
    },
    {
        xtype: 'radiogroup',
        fieldLabel: 'Search type:',
        columns: 2,
        vertical:true,
        items: [
            {
                boxLabel: 'greater than',
                name: 'option',
                inputValue: '1',
                submitValue: false,
                checked: true,
                listeners: {
                    change: function (field, newValue, oldValue) {
                        if (newValue) myPanel.down('#parcel').inputEl.dom.name = 'parcelAtt__ge';
                    }
                }
            },
            {
                boxLabel: 'lower then',
                name: 'option',
                inputValue: '2',
                submitValue: false,
                listeners: {
                    change: function (field, newValue, oldValue) {
                        if (newValue) myPanel.down('#parcel').inputEl.dom.name = 'parcelAtt__le';
                    }
                }
            },
        ]
    }
],

I can confirm (via Firebug) that above code changes field name in HTML, but when submitting form, GeoExt does not use new field name in setting up OpenLayers Filter.

Any hint or solution?

Answer 1

Unless you have a file upload field in your form, ExtJS does not use HTML Form submission at all, so the input element's name is not used.

Two possible solutions:

Either you can try whether you can use the setName function on the field:

myPanel.down('#parcel').setName('parcelAtt__le')

Or you have to use two fields with predefined names, and synchronize the values between them:

items: [{
    xtype: "numberfield",
    itemId: 'parcelGe',
    name: 'parcelAtt__ge',
    fieldLabel: 'Parcel Number:'
},{
    xtype: "numberfield",
    hidden: true,
    itemId: 'parcelLe',
    name: 'parcelAtt__le',
    fieldLabel: 'Parcel Number:'
},{
    xtype: 'radiogroup',
    fieldLabel: 'Search type:',
    columns: 2,
    vertical:true,
    simpleValue: true,
    items: [{
        boxLabel: 'greater than',
        name: 'option',
        inputValue: 'ge',
        submitValue: false,
        checked: true
    },{
        boxLabel: 'lower than',
        name: 'option',
        inputValue: 'le',
        submitValue: false
    }],
    listeners: {
        change: function (field, newValue, oldValue) {
            var leField = myPanel.query('#parcelLe'),
                geField = myPanel.query('#parcelGe');
            if(newValue=='le') {
                leField.show();
                geField.hide();
                leField.setValue(geField.getValue());
            }
            else if(newValue=='ge') {
                geField.show();
                leField.hide();
                geField.setValue(leField.getValue());
            }
        }
    }
}],

Answer 2

I found my mistake. I shouldn't change Dom elements directly. Instead, I had to add a setName method to fields, as follows(Surprisingly, only getName method is provided by Ext JS 5.1 by default) :

    Ext.define('MyApp.form.field.Base', {
        override: 'Ext.form.field.Base',
        setName: function(name) {
        this.name = name;
        }
    });

and then using that method in event handlers of radio buttons, as follows:

if (newValue) myPanel.down('#parcel').setName('parcelAtt__ge');