Readers are used to interpret data to be loaded into a Model instance or a Store +- usually in response to an AJAX request. This is normally handled transparently by passing some configuration to either the +Model or the Store in question - see their documentation for further details.
+ + + + +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 = new 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
+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 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.
+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.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 whole dataset is not passed in one go, but is being paged from +the remote server. Defaults to total.
+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
+The responce object
+The useful data from the response
+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.
+The response object. This may be either an XMLHttpRequest object or a plain JS object
+The parsed ResultSet object
+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.
+The raw data object
+A ResultSet object
+