ExtJs - How to load json file using extjs with the Ext.Ajax.request method?

Question

I wish to load a json file using extjs. Previously I was loading my json file with the help of jquery library as below:

Ext.define('app.store.Students', {
    extend: 'Ext.data.Store',
    model: 'app.model.Student',
    storeId: 'StudentData',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        success: function(resp) {
        console.log(resp.responseText);
        },
        reader: {
            type: 'json',
            root: 'student1',
            model: 'app.model.Student',
            successProperty: 'success'
        }
    }
});

But now I want to load my json file using ExtJs. I tried the below code:

Ext.define('app.store.Students', {
    extend: 'Ext.data.Store',
    model: 'app.model.Student',
    storeId: 'StudentData',
    autoLoad: true,
});
Ext.Ajax.request({
    url: 'data/users.json',
    //method: 'GET',
    success: function(response){
        var text = response.responseText;
        alert('1')
        console.log(this.url);
        // process server response here
    }
});

but it says 'Uncaught TypeError: Cannot call method 'indexOf' of undefined'. When inspected in firebug, the url given below is undefined in ext-all-debug.js.

    urlAppend : function(url, string) {
    if (!Ext.isEmpty(string)) {
    return url + (url.indexOf('?') === -1 ? '?' : '&') + string;
    }
    return url;
    },

I tried to console the url as given above in Ext.Ajax.request method, it says url is undefined. Where am I going wrong?

FYI: This is my file structure:

-html file
-data folder - users.json
-app folder - store folder - js file (This is where I use my Ext.Ajax.request method)

Am I going wrong in the relative path? If so, how I should use it?

Dev Dev · Accepted Answer · 2013-06-24T05:00:58

If data is not specified, and if autoLoad is true or an Object, this store's load method is automatically called after creation.Either set autoLoad to false or use proxy with type ajax and reader and then a callback function to handle your json data.

Update : Try this

Ext.define('app.store.Students', {
extend: 'Ext.data.Store',
model: 'app.model.Student',
storeId: 'StudentData',
autoLoad: true,
proxy: {
    type: 'ajax',
    url: 'app/data/users.json',
    reader:{
        type: 'json',
        root: 'student1'//If you are using student1 as root.
    }
}

ExtJs - How to load json file using extjs with the Ext.Ajax.request method?

1 Answers