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.

Was it helpful?

Solution

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.

OTHER TIPS

var form = Ext.getCmp('formJobSummary');console.log(form) will probably return undefined. 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 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'
            }]
        }]

    });

    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) {
                testForm.loadRecord(store.first());
            }
        }
    });


});

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?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top