For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

Sencha Documentation

Hierarchy

Ext.data.reader.Reader
Ext.data.reader.Json

The JSON Reader is used by a Proxy to read a server response that is sent back in JSON format. This usually happens as a result of loading a Store - for example we might create something like this:

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

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

The example above creates a 'User' model. Models are explained in the Model docs if you're not already familiar with them.

We created the simplest type of JSON Reader possible by simply telling our Store's Proxy that we want a JSON Reader. The Store automatically passes the configured model to the Store, so it is as if we passed this instead:

reader: {
    type : 'json',
    model: 'User'
}

The reader we set up is ready to read data from our server - at the moment it will accept a response like this:

[
    {
        "id": 1,
        "name": "Ed Spencer",
        "email": "ed@sencha.com"
    },
    {
        "id": 2,
        "name": "Abe Elias",
        "email": "abe@sencha.com"
    }
]

Reading other JSON formats

If you already have your JSON format defined and it doesn't look quite like what we have above, you can usually pass JsonReader a couple of configuration options to make it parse your format. For example, we can use the root configuration to parse data that comes back like this:

{
    "users": [
       {
           "id": 1,
           "name": "Ed Spencer",
           "email": "ed@sencha.com"
       },
       {
           "id": 2,
           "name": "Abe Elias",
           "email": "abe@sencha.com"
       }
    ]
}

To parse this we just pass in a root configuration that matches the 'users' above:

reader: {
    type: 'json',
    root: 'users'
}

Sometimes the JSON structure is even more complicated. Document databases like CouchDB often provide metadata around each record inside a nested structure like this:

{
    "total": 122,
    "offset": 0,
    "users": [
        {
            "id": "ed-spencer-1",
            "value": 1,
            "user": {
                "id": 1,
                "name": "Ed Spencer",
                "email": "ed@sencha.com"
            }
        }
    ]
}

In the case above the record data is nested an additional level inside the "users" array as each "user" item has additional metadata surrounding it ('id' and 'value' in this case). To parse data out of each "user" item in the JSON above we need to specify the record configuration like this:

reader: {
    type  : 'json',
    root  : 'users',
    record: 'user'
}

Response metadata

The server can return additional data in its response, such as the total number of records and the success status of the response. These are typically included in the JSON response like this:

{
    "total": 100,
    "success": true,
    "users": [
        {
            "id": 1,
            "name": "Ed Spencer",
            "email": "ed@sencha.com"
        }
    ]
}

If these properties are present in the JSON response they can be parsed out by the JsonReader and used by the Store that loaded it. We can set up the names of these properties by specifying a final pair of configuration options:

reader: {
    type : 'json',
    root : 'users',
    totalProperty  : 'total',
    successProperty: 'success'
}

These final options are not necessary to make the Reader work, but can be useful when the server needs to report an error or if it needs to indicate that there is a lot of data available of which only a subset is currently being returned.

Defined By

Config Options

Other Configs

 
Name of the property within a row object that contains a record identifier value. Defaults to The id of the model. I...

Name of the property within a row object that contains a record identifier value. Defaults to The id of the model. If an idProperty is explicitly specified it will override that of the one specified on the model

 
True to automatically parse models nested within other models in a response object. See the Ext.data.reader.Reader in...

True to automatically parse models nested within other models in a response object. See the Ext.data.reader.Reader intro docs for full explanation. Defaults to true.

 

The name of the property which contains a response message. This property is optional.

The name of the property which contains a response message. This property is optional.

 
The optional location within the JSON response that the record data itself can be found at. See the JsonReader intro ...

The optional location within the JSON response that the record data itself can be found at. See the JsonReader intro docs for more details. This is not often needed and defaults to undefined.

 
Required. The name of the property which contains the Array of row objects. Defaults to undefined. An exception wil...

Required. The name of the property which contains the Array of row objects. Defaults to undefined. An exception will be thrown if the root property is undefined. The data packet value for this property should be an empty array to clear the data or show no data.

 
Name of the property from which to retrieve the success attribute. Defaults to success. See Ext.data.proxy.Proxy.exc...

Name of the property from which to retrieve the success attribute. Defaults to success. See Ext.data.proxy.Proxy.exception for additional information.

 
Name of the property from which to retrieve the total number of records in the dataset. This is only needed if the wh...

Name of the property from which to retrieve the total number of records in the dataset. This is only needed if the whole dataset is not passed in one go, but is being paged from the remote server. Defaults to total.

 
True to ensure that field names/mappings are treated as literals when reading values. Defalts to false. For example, ...

True to ensure that field names/mappings are treated as literals when reading values. Defalts to false. For example, by default, using the mapping "foo.bar.baz" will try and read a property foo from the root, then a property bar from foo, then a property baz from bar. Setting the simple accessors to true will read the property with the name "foo.bar.baz" direct from the root object.

Defined By

Properties

 

DEPRECATED - will be removed in Ext JS 5.0. This is just a copy of this.rawData - use that instead

DEPRECATED - will be removed in Ext JS 5.0. This is just a copy of this.rawData - use that instead

 

The raw data object that was last passed to readRecords. Stored for further processing if needed

The raw data object that was last passed to readRecords. Stored for further processing if needed

Defined By

Methods

 

 

Parameters

  • config : Object

    Optional config object

Returns

  • void   
 
Takes a raw response object (as passed to this.read) and returns the useful data segment of it. This must be implemen...

Takes a raw response object (as passed to this.read) and returns the useful data segment of it. This must be implemented by each subclass

Parameters

  • response : Object

    The responce object

Returns

  • Object   

    The useful data from the response

 
read( Object response) : Ext.data.ResultSet
Reads the given response object. This method normalizes the different types of response object that may be passed to ...

Reads the given response object. This method normalizes the different types of response object that may be passed to it, before handing off the reading of records to the readRecords function.

Parameters

  • response : Object

    The response object. This may be either an XMLHttpRequest object or a plain JS object

Returns

  • Ext.data.ResultSet   

    The parsed ResultSet object

 
readRecords( Object data) : Ext.data.ResultSet
Reads a JSON object and returns a ResultSet. Uses the internal getTotal and getSuccess extractors to retrieve meta da...

Reads a JSON object and returns a ResultSet. Uses the internal getTotal and getSuccess extractors to retrieve meta data from the response, and extractData to turn the JSON data into model instances.

Parameters

  • data : Object

    The raw JSON data

Returns

  • Ext.data.ResultSet   

    A ResultSet containing model instances and meta data about the results