Question

I am new to EXTJS and am using EXTJS-4.1 for now.
I have a basic form, to which I need to populate data on page load.
server url will return a JSON.

[{"countryid":1,"countrycode":"US","countryname":"United States"}]

my form code is

Ext.require([
    'Ext.form.*'
    //'Ext.layout.container.Column',
    //'Ext.tab.Panel'
    //'*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
   {name: 'countryid'},
   {name: 'countrycode'},
   {name: 'countryname'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
    type: 'ajax',
    url : 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
    reader:{ 
        type:'json'                     
    }
},
autoLoad:true,
    listeners: {
        load: function() {
            var form = Ext.getCmp('formJobSummary'); 
            form.loadRecord(myStore.data.first());
        }
    }
});


var testForm = Ext.create('Ext.form.Panel', {
                    width: 500,
                    renderTo: Ext.getBody(),
                    title: 'Country Form',
                    waitMsgTarget: true,
                    fieldDefaults: {
                        labelAlign: 'right',
                        labelWidth: 85,
                        msgTarget: 'side'
                    },
                    items: [{
                        xtype: 'fieldset',
                        items: [{
                                xtype:'textfield',
                                fieldLabel: 'ID',
                                name: 'countryid'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'CODE',
                                name: 'countrycode'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'COUNTRY',
                                name: 'countryname'
                        }]
                    }]

            });


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

I was able to populate the same JSON to a grid. Can you please help me through…
I got a lot of examples over net and tried but still no luck. The above given is also a modified code snippet which I got while browsing.

Answer 1

load() function is asynchronous. So you did a right thing – creating a handler for load event and putting logic there. However you did couple mistakes:

1. In the load handler you will have some parameters to the function. First parameter will be store – so you don’t need to use global variable.

2. You don’t need to have this.testForm.getForm().loadRecord(app.formStore); – because it’s not a valid command and at that moment you have no idea whether your store is actually loaded or not. Remove it. You already have loadRecords in the store handler.

3. Form rendering and store auto loading are two different events and you don’t have control over their timing. So I would recommend to disable autoLoad for the store and manually call store.load() after you know that form is ready.