How is a json file read? extjs

3
votes

Say that I have a the fields here for a user in a "json" format:

{
    "users": [
       {
           "id": 1,
           "name": "Ed Spencer",
           "email": "[email protected]"
       },
       {
           "id": 2,
           "name": "Abe Elias",
           "email": "[email protected]"
       }
    ]
}

I assume that the root here is "users". Would I save this text as a users.json file?

And from there, how do I read from this file (in this case, with ext.js)

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

var store = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

What is the url? Is it an absolute path? Will this even work??? Help!

2
ajaxextjsmodel

2 Answers

3
votes

In an HTML page, a JavaScript file is served relative to the URL of the HTML page, or from an absolute path.

Would I save this text as a users.json file?

You can, sure.

What is the url?

The URL users.json is relative to the URL of the HTML page that is running your application, so if the HTML page was at http://localhost/myapp/index.html, the relative path users.json would be the same as the absolute path http://localhost/myapp/users.json

Is it an absolute path?

No, users.json is a relative path. You could use an absolute path if you wanted to.

I would make a data folder inside your app folder and use app/data/users.json as the URL.

You should also learn Chrome Developer Tools so that you can see the network requests.

1
votes
{
    "users": [
       {
           "id": 1,
           "name": "Ed Spencer",
           "email": "[email protected]"
       },
       {
           "id": 2,
           "name": "Abe Elias",
           "email": "[email protected]"
       }
    ]
}

in your model's field, there is no id, which comes from json, there is only name and email fields...

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

add id field to model, like this 

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email']
});