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

你可能感兴趣的:(Sencha(Extjs) Ext.data.Store与Reader结合加载多重嵌套数据对象)