Sencha(Extjs) Ext.data.Store与Reader结合加载多重嵌套数据对象

Ext.data.Readers常用于解析Model或Store中加载的数据，例如Ajax请求返回的数据（XML/JSON）。通过对每个Model的associations的属性配置，Readers也可以自动加载多重嵌套（deeply-nested）的数据对象。下面举一个CRM系统中的各个数据对象相互关联的关系，用来说明Reader的灵活性。系统涉及User、Orders、 OrderItems和Products。首先我们定义models:

    
    
    
    

     
     
     
     
 
      Ext.regModel( 
      " 
      User 
      " 
      , {
    fields: [
         
      ' 
      id 
      ' 
      ,  
      ' 
      name 
      ' 
      
    ],

    hasMany: {model:  
      ' 
      Order 
      ' 
      , name:  
      ' 
      orders 
      ' 
      },

    proxy: {
        type:  
      ' 
      rest 
      ' 
      ,
        url :  
      ' 
      users.json 
      ' 
      ,
        reader: {
            type:  
      ' 
      json 
      ' 
      ,
            root:  
      ' 
      users 
      ' 
      
        }
    }
});

Ext.regModel( 
      " 
      Order 
      " 
      , {
    fields: [
         
      ' 
      id 
      ' 
      ,  
      ' 
      total 
      ' 
      
    ],

    hasMany  : {model:  
      ' 
      OrderItem 
      ' 
      , name:  
      ' 
      orderItems 
      ' 
      , associationKey:  
      ' 
      order_items 
      ' 
      },
    belongsTo:  
      ' 
      User 
      ' 
      
});

Ext.regModel( 
      " 
      OrderItem 
      " 
      , {
    fields: [
         
      ' 
      id 
      ' 
      ,  
      ' 
      price 
      ' 
      ,  
      ' 
      quantity 
      ' 
      ,  
      ' 
      order_id 
      ' 
      ,  
      ' 
      product_id 
      ' 
      
    ],

    belongsTo: [ 
      ' 
      Order 
      ' 
      , {model:  
      ' 
      Product 
      ' 
      , associationKey:  
      ' 
      product 
      ' 
      }]
});

Ext.regModel( 
      " 
      Product 
      " 
      , {
    fields: [
         
      ' 
      id 
      ' 
      ,  
      ' 
      name 
      ' 
      
    ],

    hasMany:  
      ' 
      OrderItem 
      ' 
      
}); 
     
    
    
    
    

 这里我们虚构消费数据如下：

 {

     " 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 "
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

 现在我们可以试着读取和使用这些数据，方法如下：

     
     
     
     
 
      
 
       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 
       ' 
       ));
            });
        });
    }
}); 
      
 
     

运行结果如下：

Orders for Ed:

Order ID: 50, which contains items:

2 orders of MacBook Pro

3 orders of iPhone