ExtJS -=- Complete FormPanel Example with ComboBox

Here's a complete example how to use a FormPanel (loading and saving) that contains some combobox binded with JSON Stores. Since calls in AJAX are asynchronous, by the time the form is loaded, the JSON Store are not loaded. So the Combo box shows the index instead of the right value...

This example loads the JSON Stores in sequence, and once the store are loaded, it loads the FormPanel data. So all the data is loaded correctly...

var objectAStore =  new Ext.data.JsonStore({
    url: '/objecta/json_dropdown_list',
    root: 'Records',
    totalProperty: 'Total',
    fields:[
    {
        name: 'id'
    },
    {
        name: 'name'
    }
    ]
});

var objectBStore = new Ext.data.JsonStore({
    url: '/objectb/json_dropdown_list',
    root: 'Records',
    totalProperty: 'Total',
    fields:[
    {
        name: 'id'
    },
    {
        name: 'name'
    }
    ]
});

var myForm = new Ext.form.FormPanel({
    monitorValid: true,
    border: false,
    bodyBorder: false,
    baseCls: 'x-plain',
    labelWidth: 130,

    defaults:{
        width: 270,
        allowBlank: false,
        displayField: 'name',
        valueField: 'id'
    },

    keys: [
    {
        key: [10, 13],
        fn: function() {
            if(myForm.getForm().isValid()){
                myForm.buttons[0].fireEvent('click');
            }
        }
    }
    ],

    buttons: [
    {
        text: 'Save',
        formBind: true,
        handler: function(){
            myForm.getForm().submit({
                method:'POST',
                url: '/objectc/save',
                reset: false,
                waitTitle: "Please Wait",
                waitMsg: 'Saving ...',
                success: function(form, action) {
                    win.close();
                },
                failure: function() {
                //Failure stuff here
                }
            })
        }
    },
    {
        text: 'Close',
        handler: function() {
            win.close();
        }
    }
    ],

    items:[
    {
        xtype: 'hidden',
        name: "id",
        value: objectc_id
    },
    {
        mode: 'remote',
        hiddenName: 'from_objectb',
        fieldLabel: 'FROM OBJECT B',
        xtype: 'combo',
        store: objectBStore
    },
    {
        fieldLabel: 'OBJECT A',
        xtype: 'combo',
        typeAhead: true,
        mode: 'remote',
        minChars: 1,
        hiddenName: 'objecta',
        triggerAction: 'all',
        store:  objectAStore
    },

    {
        fieldLabel: 'TO OBJECT B',
        xtype: 'combo',
        hiddenName: 'to_objectb',
        store: objectBStore
    }
    ]
});


/**
     * If the relationship_id is not empty, so the window is used of updating data
     */
if(!Ext.isEmpty(relationship_id)){
    objectAStore.load({
        params:{
            'objecta': objecta
        },
        callback: function(){
            objectBStore.load({
                params:{
                    'from_objectb': from_objectb,
                    'to_objectb': to_objectb
                },

                callback: function(){
                    myForm.load({
                        url: '/objectc/get_form_data',
                        params: {
                            'objectc_id': objectc_id
                        }
                    });
                }
            });
        }
    });


}

win = new Ext.Window({
    title: 'TITLE HERE',
    height: 163,
    width: 450,
    layout: 'fit',
    border: false,
    bodyStyle: 'padding: 10px',
    bodyBorder: false,
    modal: true,
    items:[
    myForm
    ],
    listeners:{
        beforeshow: function(){
            Ext.MessageBox.hide();
        }
    }
});

win.show();