EXTJS 4 form population with JSON read

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.

sha · Answer 1 · 2012-05-19 12:20:11Z

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:

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.
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.
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 callstore.load() after you know that form is ready.

Alex · Answer 2 · 2012-05-21 10:45:52Z

var form = Ext.getCmp('formJobSummary');console.log(form) will probably returnundefined. Assign a name to the form and off you go. Or better yet...

// Ext.require([
// 'Ext.form.*'
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
//'*'
// ]); // you dont need ext.require for ext integrated stuff

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

    //var bd = Ext.getBody(); 

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

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

    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 (store,record,e) {
                form.loadRecord(store.first());
            }
        }
    });


    var testForm = Ext.create('Ext.form.Panel', {
        width: 500,
        renderTo: Ext.getBody(),
        name:'formJobSummary', //why your orignal bit wasn't working
        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'
            }]
        }]

    });



});

Hataru · Answer 3 · 2012-05-19 08:02:56Z

up vote -2 down vote

few things to try:

1) if u seek ur file on localhost don't put localhost on url only write

url : '/milestone_1/web/app_dev.php/md/country/show/1'

what ur php file do? could u post the code?

3) place the proxy configuration on model not on store.

4) have u try to test if store has read records on load? with a console.log?

answered May 19 at 8:02

Hataru
39 8

	Just out of curiosity, why do you recommend individual records having their own proxy settings? – Alex May 21 at 10:30
	what do u mean..i only ask if he verify if the store upload data. How do u check it? i usually ask for a record count. Don't u think? – Hataru May 21 at 18:45
	"3) place the proxy configuration on model not on store." Eh I guess that was a mis-phrasing. Model, not record.– Alex May 22 at 8:57

EXTJS 4 form population with JSON read

EXTJS 4 form population with JSON read

3 Answers