Question

Very new to extjs 4.0. So i could be phrasing this incorrectly.

I have a layout with a series of nested panels. One of these panels is a form panel which i intend to use loadRecord to fill with data. Most examples i’ve seen using something like the following to load the records.

testForm.getForm().loadRecord(app.formStore);

However you will see below that my formpanel is nested. So how do i load the form in order to load record

                    title: 'Job Summary',
                    items: [
                        {
                            xtype: 'form',
                            id: 'formJobSummary',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            bodyPadding: 10,
                            title: '',
                            url: '/submit.html',
                            flex: 1,
                            dockedItems: [
                                {
                                    xtype: 'toolbar',
                                    flex: 1,
                                    dock: 'bottom',
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: 'Submit'
                                        },
                                        {
                                            xtype: 'button',
                                            text: 'Cancel'
                                        }
                                    ]
                                }
                            ],
                            items: [
                                {
                                    xtype: 'panel',
                                    flex: 1,
                                    items: [
                                        {
                                            xtype: 'radiogroup',
                                            width: 400,
                                            fieldLabel: 'Job Type',
                                            items: [
                                                {
                                                    xtype: 'radiofield',
                                                    boxLabel: 'Fix Price'
                                                },
                                                {
                                                    xtype: 'radiofield',
                                                    boxLabel: 'Production'
                                                }
                                            ]
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Quoted Price'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Client PO'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Job Quatity'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Files Over'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Previous JobId'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Estimate'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'panel',
                                    flex: 1
                                },
                                {
                                    xtype: 'panel',
                                    layout: {
                                        align: 'stretch',
                                        type: 'hbox'
                                    },
                                    flex: 1
                                }
                            ]
                        }
                    ]
                },

Answer 1

Here is the code which shows how to populate data in the formpanel:

Ext.onReady(function(){

    //Define a model with field names mapping to the form field name
Ext.define('UserModel', {
    extend: 'Ext.data.Model',
    fields: ['first', 'last']
});

    //Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
    first: 'Ajit',
    last: 'Kumar'
});

var form = Ext.create('Ext.form.Panel', {

        renderTo: Ext.getBody(),

    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',                //this name must match with the field name in the model
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, 
        disabled: true,
        handler: function() {
        }
    }]
});

form.loadRecord(user);  

});

So, the steps are:

1. Define a model, which must extend Ext.data.Model as the stores and
   form expect the date to be in the model format
2. Create a form panel
3. Create an instance of the model with the data
4. Load the data in the form using the model instance