Question

I want to load the form fields using json data.
I am using extjs 4.1 for ui and asp.net webapi to fetch the data.
My objective is to load the data and bind it to the field dynamically which form.load is used for if the name of field corresponds to the data.fieldnameproperty.

i have taken the below link as reference :
Ext JS: FormPanel not populating fields with JSON data

It loads the data if the Webapi is on the same project :
i.e.
projectname:
–ui folder
— webapi controller folder

but in my case the data is coming from different domain 2 different project for ui and webapi. My form.load code is as below

formCmp.getForm().load({
    url: 'http://localhost/WebApiCore/api/Values/',
    method: 'GET',
    headers: {'Content-type': 'application/json'},
// params: {
//          empId: '111'
//         },
    success: function (form, action) {
        console.log(action.result);
        //Ext.Msg.alert("Load success", action.result);
    },
    failure: function (form, action) {
        //Ext.Msg.alert("Load failed", action.result.errorMessage);
    }
    });

I get the error as “NetworkError: 405 Method Not Allowed – “http://localhost/WebApiCore/api/Values/?_dc=1340261175475” in firebug.

my project is running on “http://localhost:54118/PreHospital.htm“

I am not sure is it the problem of extjs not sending the cross domain request using form.load or the problem with webapi doesn’t allow cross domain request.

I am not sure how to set extjs to send the jsonp request using form.load.

any kind of help is appreciated.

Answer 1

If you just have regular form fields on your Ext Form, it will actually do an AJAX call to submit this data. I don’t think there is a way to force a form.load to do a JSONP request. You will probably need to do a manual JSONP request like you would a manual AJAX request.

        Ext.data.JsonP.request({
            url         : websiteURL,
            scope       : this,
            params      : {
                empId: '111'
            },
            success     : function(jsonData) {

            },
            failure     : function(jsonData) {
                Ext.Msg.show({
                    title   : 'Warning',
                    msg     : message,
                    buttons : Ext.Msg.OK,
                    icon    : Ext.Msg.WARNING
                });
           }
    });