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 · Accepted Answer · 2013-06-24 06:01:19Z

3

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.
    }
}

edited Jun 24, 2013 at 6:01

answered Jun 24, 2013 at 5:00

Dev

3,9323 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FlashyFuddyFuddy Over a year ago

I tried setting autoLoad to false. I dont get the error 'Uncaught TypeError: Cannot call method 'indexOf' of undefined' anymore. But, I still cant get the datas loaded in my page. I mean the url is wrong. I'm using my relative path : ' url: 'data/users.json','. Is this wrong?

Dev Over a year ago

structure should be : app folder->stores, data folder, models, views I mean all the above should be in your app folder.

FlashyFuddyFuddy Over a year ago

Now that I have placed data, model, view, store, controller inside my app folder and have used the 'url: 'app/data/users.json', still my grid doesn't load the datas :( and the console.log(this.url) is still undefined. :(

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related