ExtJS 3: form load with several items with identical names

Question

I have an ExtJS form which contains several items that have the same name. I expect that when the form is loaded with the values from server-side all of those equally named components will get assigned the same relevant value.

Apparently, what happens is that only the first element from the group of equally named gets the value, others are skipped.

Is there an easy way to alter this observed behavior?

UPDATE

Below is the code of the form:

var productionRunAdvancedParametersForm = new Ext.form.FormPanel({
    region : 'center',
    name : 'productionRunAdvancedParametersCommand',
    border : false,
    autoScroll : true,
    buttonAlign : 'left',
    defaults : {
        msgTarget : 'side'
    },
    layoutConfig : {
        trackLabels : true
    },
    labelWidth : 200,
    items : [
    {
        xtype : 'fieldset',
        title : 'ASE',
        collapsible : true,
        autoHeight : true,
        items : [ {
            xtype : 'hidden',
            name : 'genScens'
        }, {
            xtype : 'checkbox',
            name : 'genScens',
            fieldLabel : 'GEN_SCENS',
            disabled : true
        }]
    }]
    ,
    listeners : {
        beforerender : function(formPanel) {

            formPanel.getForm().load({
                url : BASE_URL + 'get-data-from-server.json',
                method : 'GET',
                success : function(form, action) {
                    var responseData = Ext.util.JSON.decode(action.response.responseText);
                    if (!responseData.success) {
                        Screen.errorMessage('Error', responseData.errorMessage);
                    }
                },
                failure : function(form, action) {
                    Ext.Msg.alert("Error", Ext.util.JSON.decode(action.response.responseText).errorMessage);
                }
            });

        }
    }
});

The server response is:

{"data":{"genScens":true},"success":true}

What happens is only the hidden component gets value 'true', the disabled checkbox doesn't get checked. If I swap them in the items arrays, then the checkbox is checked but the hidden doesn't get any value.

Can you please show us some code? – Pierre Arlaud Nov 27 '13 at 13:42 — Pierre Arlaud, Nov 27 '13 at 13:42

score 2 · Accepted Answer · answered Nov 27 '13 at 14:28

The behaviour you see is exactly what I'd expect.

Inside a form, using the same field name multiple times -unless you use it for radiobuttons, which is not the case- is an error. Just think about what the form submit function should do in this case: should it send the same key (input name) twice, possibly with different values?

(Obviously, in the case of radiobuttons the answer is simple: sent the input name as key, and the checked radiobutton's value as value).

What Ext does here is, scan the form seaching for the input field matching the name, and then assign the value to the first matching input (since it assumes no duplicate names).

You can work it around simply by:

using two different names in the form (eg. genScens and genScens_chk )
sending the same value under two different keys in the server-side response, e.g.

{"data":{"genScens":true,"genScens_chk":true},"success":true}

Please note: if you cannot alter the server response, still use two different names, just add a callback to the success function, setting the genScens_chk value accordingly, like that:

success : function(form, action) {
 var responseData = Ext.util.JSON.decode(action.response.responseText);
 if (!responseData.success) {
   Screen.errorMessage('Error', responseData.errorMessage);
 }
 else{
   formPanel.getForm().findField("genScens_chk").
                       setValue(responseData.data.genScens);
 }
},

For some reason I hoped the behavior in my case would be: - upon load assign the value to all relevant elements (not just to the first one). - upon submit send the array of values for the given name. In my case it would perfectly work since disabled checkboxes do not get submitted and thus I would have only the value of the hidden submitted. — preeze, Nov 27 '13 at 14:42
I agree, in your case the submit would work, but only because disabled inputs don't get submitted :) — Paolo Stefan, Nov 27 '13 at 14:59
I took that idea of submission of an array of values from here: http://stackoverflow.com/questions/4727974/how-to-post-submit-an-input-checkbox-that-is-disabled/4728029#4728029 Paolo, do you have link maybe which explains why form load with multiple elements with the name works exactly like this? Is it according to HTML spec or is it ExtJS specific? — preeze, Nov 27 '13 at 15:08

ExtJS 3: form load with several items with identical names

1 Answers1