Readers are used to interpret data to be loaded into a {@link Ext.data.Model Model} instance or a {@link Ext.data.Store Store} - * - usually in response to an AJAX request. This is normally handled transparently by passing some configuration to either the - * {@link Ext.data.Model Model} or the {@link Ext.data.Store 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 {@link Ext.data.Association 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 {@link 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
-