zoukankan      html  css  js  c++  java
  • ExtJS笔记 Reader

    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 aProxy, and is configured using the Proxy's reader configuration property:

    reader用来将数据解释到model实例或store,这里的数据常常来自ajax请求的响应。通常不需要直接创建reader对象的实例,因为reader总是与proxy一起使用,一般都是通过proxy的reader配置项来配置其属性:

    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:

    上面的reader配置为消费json数据,形如下面的:

    {
        "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:

    reader具有自动加载深度嵌套的数据对象的能力--基于每个模型的associations 配置。下面是一个例子,通过一个虚构的crm系统演示了这种灵活性,crm中管理了user、orders、orderItems、products。首先我们定义模型:

    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:

    json响应是深度嵌套的--它返回所有用户,每个用户的所有订单每个订单的所有条目,以及条目关联的产品。现在我们像下面这样读取并使用它:

    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.association.BelongsTo)
                    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
  • 相关阅读:
    ckplayer不支持谷歌92版本,flashplayer不支持m3u8的方案
    git merge 失败
    在SuperSocket中使用Unity注入
    在WPF中集成SuperSocket 2.0
    在WPF中打印A4纸
    使用 HoloLens 仿真器
    C# 优化内存和运行效率
    Redis 高可用篇:你管这叫 Sentinel 哨兵集群原理
    Redis 核心篇:唯快不破的秘密
    Redis 日志篇:无畏宕机快速恢复的杀手锏
  • 原文地址:https://www.cnblogs.com/jimcheng/p/4283808.html
Copyright © 2011-2022 走看看