In ExtJS does getForm().load() load combo field values?

Question

I have a form with a combo box in it. The combo box loads it's data via a Json store and I use form.getForm().load( url: 'URL') to load the forms data also from a Json store.

When the data is loaded into the form I can see via Firebug that it receives the right value, the combo then displays the correct corresponding display value. When I look at the HTML in FireBug for the hiddenField it says the value="DISPLAYVALUE" not value="VALUE". When I then pick any value from the combo it changes to the correct value="VALUE".

Of course if the user never changes the combo the wrong value is submitted. Is this by design/limitation or am I missing something.

Do I really need to load and verify the data for each combo before I do the getForm().load()? wouldn't it make sense for load() to just load the complete data even if that means loading the data from a store?

I've included simplified sample code that has the issue.

    Ext.onReady(function(){

    var frmClientRecord = {
        xtype: 'form',
        items: [
            {
                fieldLabel: 'Advisor',
                xtype: 'combo',
                id: 'advisorName',
                displayField: 'Advisor',
                valueField: 'advisorId',
                hiddenName: 'advisorsId',
                mode: 'remote',
                store: new Ext.data.Store({
                    autoLoad: true,
                    proxy: new Ext.data.HttpProxy({
                        url: '/referrals/index.php/advisors/read',
                        method: 'POST'
                        }),
                    reader: new Ext.data.JsonReader({
                        root: 'results',
                        fields: [
                            {name: 'advisorId'},
                            {name: 'Advisor'}
                        ]
                    })
                })
            }
        ]
    }

    frmClientRecordCmp = new Ext.FormPanel(Ext.apply(frmClientRecord));


    frmClientRecordCmp.getForm().load({
        url: '/referrals/index.php/clients/getbyid/100',
    })

    frmClientRecordCmp.render(document.body);
});

JSON FOR THE COMBO

({"results":[{"Advisor":"Chris","advisorId":33},{"Advisor":"Fawzia","advisorId":2},{"Advisor":"Kent","advisorId":3},{"Advisor":"Rob","advisorId":4},{"Advisor":"Stephanie","advisorId":5}]})

JSON FOR THE FORM

{success: true, data: {"advisorsId":33}}

btw, good job asking your question around "simplified sample code" — Amol Katdare

Amol Katdare Amol Katdare · Accepted Answer · 2011-04-04T15:33:44

This could happen if your form is loading before the combo store loads. (Given that rest of your code looks Ok)

I suspect this will resolve if you render your form before loading it.
(move frmClientRecordCmp.render(document.body); one statement up in your sample code)

EDIT
Two points to consider-

Are you sure the combo store has finished loading before the form loads?
Looking at ComboBox's valueField documentation, it looks like a call to combo.setValue may be necessary after the form loads. Something along the lines of -

frmClientRecordCmp.getForm().load({ url: '/referrals/index.php/clients/getbyid/100', success:function(form,action){ form.findField('advisorName').setValue(action.result.data.advisorId); } });

In ExtJS does getForm().load() load combo field values?

2 Answers