Ext.data.reader.Reader
Alternate names
Ext.data.DataReaderExt.data.ReaderHierarchy
Ext.BaseExt.data.reader.ReaderRequires
Subclasses
Files
Readers are used to interpret data to be loaded into a Model instance or a Store - often in response to an AJAX request. In general there is usually no need to create a Reader instance directly, since a Reader is almost always used together with a Proxy, and is configured using the Proxy's reader configuration property:
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
},
});
The above reader is configured to consume a JSON string that looks something like this:
{
"success": true,
"users": [
{ "name": "User 1" },
{ "name": "User 2" }
]
}
Loading Nested Data
Readers have the ability to automatically load deeply-nested data objects based on the associations configured on each Model. Below is an example demonstrating the flexibility of these associations in a fictional CRM system which manages a User, their Orders, OrderItems and Products. First we'll define the models:
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'rest',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'total'
],
hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
});
Ext.define("OrderItem", {
extend: 'Ext.data.Model',
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
],
belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});
Ext.define("Product", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: 'OrderItem'
});
This may be a lot to take in - basically a User has many Orders, each of which is composed of several OrderItems. Finally, each OrderItem has a single Product. This allows us to consume data like this:
{
"users": [
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"total": 100,
"order_items": [
{
"id" : 20,
"price" : 40,
"quantity": 2,
"product" : {
"id": 1000,
"name": "MacBook Pro"
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"product" : {
"id": 1001,
"name": "iPhone"
}
}
]
}
]
}
]
}
The JSON response is deeply nested - it returns all Users (in this case just 1 for simplicity's sake), all of the Orders for each User (again just 1 in this case), all of the OrderItems for each Order (2 order items in this case), and finally the Product associated with each OrderItem. Now we can read the data and use it as follows:
var store = Ext.create('Ext.data.Store', {
model: "User"
});
store.load({
callback: function() {
//the user that was loaded
var user = store.first();
console.log("Orders for " + user.get('name') + ":")
//iterate over the Orders for each User
user.orders().each(function(order) {
console.log("Order ID: " + order.getId() + ", which contains items:");
//iterate over the OrderItems for each Order
order.orderItems().each(function(orderItem) {
//we know that the Product data is already loaded, so we can use the synchronous getProduct
//usually, we would use the asynchronous version (see Ext.data.BelongsToAssociation)
var product = orderItem.getProduct();
console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));
});
});
}
});
Running the code above results in the following:
Orders for Ed:
Order ID: 50, which contains items:
2 orders of MacBook Pro
3 orders of iPhone
Available since: 1.1.0
Config options
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
Available since: 4.0.0
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.
Defaults to: true
Available since: 4.0.0
The name of the property which contains a response message. This property is optional.
Available since: 3.4.0
The name of the property which contains the Array of row objects. For JSON reader it's dot-separated list of property names. For XML reader it's a CSS selector. For array reader it's not applicable.
By default the natural root of the data will be used. The root Json array, the root XML element, or the array.
The data packet value for this property should be an empty array to clear the data or show no data.
Defaults to: ''
Available since: 4.0.0
Name of the property from which to retrieve the success attribute. Defaults to success. See Ext.data.proxy.Server.exception for additional information.
Defaults to: 'success'
Available since: 4.0.0
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.
Defaults to: 'total'
Available since: 4.0.0
Properties
The raw data object that was last passed to readRecords. Stored for further processing if needed
Available since: 4.0.0
Get the reference to the current class from which this object was instantiated. Unlike statics,
this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics
for a detailed comparison
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); / dependent on 'this'
return this;
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
Available since: 4.0.0
Methods
Instance Methods Creates new Reader. ...Creates new Reader.
Available since: 1.1.0
Parameters
- config : Object (optional)
Config object.
Returns
buildExtractors( [force] )privateThis builds optimized functions for retrieving record data and meta data from an object. ...This builds optimized functions for retrieving record data and meta data from an object.
Subclasses may need to implement their own getRoot function.
Available since: 3.4.0
Parameters
- force : Boolean (optional)
True to automatically remove existing extractor functions first
Defaults to: false
Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: functi...Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the arguments object
Returns
- Object
Returns the result after calling the overridden method
Call the parent's overridden method. ...Call the parent's overridden method. For example:
Ext.define('My.own.A', {
constructor: function(test) {
alert(test);
}
});
Ext.define('My.own.B', {
extend: 'My.own.A',
constructor: function(test) {
alert(test);
this.callParent([test + 1]);
}
});
Ext.define('My.own.C', {
extend: 'My.own.B',
constructor: function() {
alert("Going to call parent's overriden constructor...");
this.callParent(arguments);
}
});
var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
// alerts '2', then alerts '3'
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)
Returns
- Object
Returns the result from the superclass' method
extractData( root )privateReturns extracted, type-cast rows of data. ...Returns extracted, type-cast rows of data. Iterates to call extractValues for each row
Available since: 3.4.0
Parameters
Given an object representing a single model instance's data, iterates over the model's fields and
builds an object wi... Used internally by readAssociated. ...Used internally by readAssociated. Given a data object (which could be json, xml etc) for a specific
record, this should return the relevant part of that data for the given association name. This is only really
needed to support the XML Reader, which has to do a query to get the associated data object
Available since: 4.0.0
Parameters
- data : Object
The raw data object
- associationName : String
The name of the association to get data for (uses associationKey if present)
Returns
- Object
The root
This will usually need to be implemented in a subclass. ...This will usually need to be implemented in a subclass. Given a generic data object (the type depends on the type
of data we are reading), this function should return the object as configured by the Reader's 'root' meta data config.
See XmlReader's getRoot implementation for an example. By default the same data object will simply be returned.
Available since: 3.4.0
Parameters
- data : Object
The data object
Returns
- Object
The same data object
Initialize configuration for this class. ...Initialize configuration for this class. a typical example:
Ext.define('My.awesome.Class', {
// The default config
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
return this;
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
Available since: 4.0.0
Parameters
- config : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
mixin( name, cls )private Reads the given response object. ...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.
Available since: 4.0.0
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
Loads a record's associations from the data object. ...Loads a record's associations from the data object. This prepopulates hasMany and belongsTo associations
on the record provided.
Available since: 4.0.0
Parameters
- record : Ext.data.Model
The record to load associations for
- data : Object
The data object
Returns
- String
Return value description
Abstracts common functionality used by all Reader subclasses. ...Abstracts common functionality used by all Reader subclasses. Each subclass is expected to call this function
before running its own logic and returning the Ext.data.ResultSet instance. For most Readers additional
processing should not be needed.
Available since: 4.0.0
Parameters
- data : Object
The raw data object
Returns
- Ext.data.ResultSet
A ResultSet object
setModel( model, setOnProxy )private Get the reference to the class from which this object was instantiated. ...Get the reference to the class from which this object was instantiated. Note that unlike self,
this.statics() is scope-independent and it always returns the class from which it was called, regardless of what
this points to during run-time
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciesName
alert(this.self.speciesName); // dependent on 'this'
statics.totalCreated++;
return this;
},
clone: function() {
var cloned = new this.self; // dependent on 'this'
cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
Available since: 4.0.0
Returns
Creates new Reader.
Available since: 1.1.0
Parameters
- config : Object (optional)
Config object.
Returns
This builds optimized functions for retrieving record data and meta data from an object. Subclasses may need to implement their own getRoot function.
Available since: 3.4.0
Parameters
- force : Boolean (optional)
True to automatically remove existing extractor functions first
Defaults to:
false
Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject
Returns
- Object
Returns the result after calling the overridden method
Call the parent's overridden method. For example:
Ext.define('My.own.A', {
constructor: function(test) {
alert(test);
}
});
Ext.define('My.own.B', {
extend: 'My.own.A',
constructor: function(test) {
alert(test);
this.callParent([test + 1]);
}
});
Ext.define('My.own.C', {
extend: 'My.own.B',
constructor: function() {
alert("Going to call parent's overriden constructor...");
this.callParent(arguments);
}
});
var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
// alerts '2', then alerts '3'
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject from the current method, for example:this.callParent(arguments)
Returns
- Object
Returns the result from the superclass' method
Returns extracted, type-cast rows of data. Iterates to call extractValues for each row
Available since: 3.4.0
Parameters
Used internally by readAssociated. Given a data object (which could be json, xml etc) for a specific record, this should return the relevant part of that data for the given association name. This is only really needed to support the XML Reader, which has to do a query to get the associated data object
Available since: 4.0.0
Parameters
- data : Object
The raw data object
- associationName : String
The name of the association to get data for (uses associationKey if present)
Returns
- Object
The root
This will usually need to be implemented in a subclass. Given a generic data object (the type depends on the type of data we are reading), this function should return the object as configured by the Reader's 'root' meta data config. See XmlReader's getRoot implementation for an example. By default the same data object will simply be returned.
Available since: 3.4.0
Parameters
- data : Object
The data object
Returns
- Object
The same data object
Initialize configuration for this class. a typical example:
Ext.define('My.awesome.Class', {
// The default config
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
return this;
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
Available since: 4.0.0
Parameters
- config : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
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.
Available since: 4.0.0
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
Loads a record's associations from the data object. This prepopulates hasMany and belongsTo associations on the record provided.
Available since: 4.0.0
Parameters
- record : Ext.data.Model
The record to load associations for
- data : Object
The data object
Returns
- String
Return value description
Abstracts common functionality used by all Reader subclasses. Each subclass is expected to call this function before running its own logic and returning the Ext.data.ResultSet instance. For most Readers additional processing should not be needed.
Available since: 4.0.0
Parameters
- data : Object
The raw data object
Returns
- Ext.data.ResultSet
A ResultSet object
Get the reference to the class from which this object was instantiated. Note that unlike self,
this.statics() is scope-independent and it always returns the class from which it was called, regardless of what
this points to during run-time
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciesName
alert(this.self.speciesName); // dependent on 'this'
statics.totalCreated++;
return this;
},
clone: function() {
var cloned = new this.self; // dependent on 'this'
cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
Available since: 4.0.0
Returns
Static Methods Add / override static properties of this class. ...Add / override static properties of this class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this
Borrow another class' members to the prototype of this class. ...Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
Available since: 4.0.2
Parameters
- fromClass : Ext.Base
The class to borrow members from
- members : String/String[]
The names of the members to borrow
Returns
- Ext.Base
this
Create a new instance of this Class. ...Create a new instance of this Class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
Available since: 4.0.2
Returns
- Object
the created instance.
createAlias( alias, origin )staticCreate aliases for existing prototype methods. ...Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
Available since: 4.0.2
Parameters
- alias : String/Object
The new method name, or an object to set multiple aliases. See
flexSetter
- origin : String/Object
The original method name
Get the current class' name in string format. ...Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
Available since: 4.0.4
Returns
- String
className
implement( members )staticAdd methods / properties to the prototype of this class. ...Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Available since: 4.0.2
Parameters
- members : Object
Override prototype members of this class. ...Override prototype members of this class. Overridden methods can be invoked via
callOverridden
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this
Add / override static properties of this class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this
Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
Available since: 4.0.2
Parameters
- fromClass : Ext.Base
The class to borrow members from
- members : String/String[]
The names of the members to borrow
Returns
- Ext.Base
this
Create a new instance of this Class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
Available since: 4.0.2
Returns
- Object
the created instance.
Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
Available since: 4.0.2
Parameters
- alias : String/Object
The new method name, or an object to set multiple aliases. See flexSetter
- origin : String/Object
The original method name
Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
Available since: 4.0.4
Returns
- String
className
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Available since: 4.0.2
Parameters
- members : Object
Override prototype members of this class. Overridden methods can be invoked via callOverridden
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this