数据

最新推荐文章于 2025-08-21 18:01:40 发布

阿洲

最新推荐文章于 2025-08-21 18:01:40 发布

阅读量302

点赞数

文章标签： json 存储 user 服务器 autoload url

数据

数据包是什么加载和保存在您的应用程序的所有数据，包括41类，但有三个是比其他更重要- 模型，商店和Ext.data.proxy.Proxy的。使用这些几乎每一个应用程序，并支持卫星类：

数据包概述

模型和存储

数据包的核心是Ext.data.Model。A型代表某些类型的应用程序中的数据-例如，一个电子商务应用程序可能有用户，产品和订单的模式。在其最简单的模型仅仅是一个领域和他们的数据集。我们要看看在四个模型的主要部分- 领域，代理，协会和验证。

模型架构

让我们来看看如何现在我们创建了一个模型：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});

模型通常用一个商店，基本上是一个模型实例的集合。设立商店和装载它的数据是简单的：

Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true
});

我们我们的商店配置使用Ajax代理，告诉它的URL加载数据和阅读器，用于解码数据。在这种情况下，我们的服务器返回JSON，所以我们已经成立了一个JSON Reader来读取响应。商店自动加载了一套从URL中的用户模型实例users.json。users.json URL应该返回一个JSON字符串，它看起来像这样：

{ 
    成功： 为true ，
    用户： [ 
        { ID ： 1 ，名称： “爱德”  }，
        { ID ： 2 ，名称： “汤米”  } 
    ] 
}

对于现场演示，请参阅简单的商店示例。

内联数据

商店也可以载入数据联。内部，商店作为传递的对象，我们每个转换数据到模型的实例：

Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { firstName: 'Ed',    lastName: 'Spencer' },
        { firstName: 'Tommy', lastName: 'Maintz' },
        { firstName: 'Aaron', lastName: 'Conran' },
        { firstName: 'Jamie', lastName: 'Avins' }
    ]
});

内联数据示例

排序和分组

商店是能够进行排序，筛选和分组本地，以及支持远程排序，筛选和分组：

分机。创建（Ext.data.Store' ， { 
    模型： “用户” ，

    分拣机： [ '名称' ， 'ID' ]，
    过滤器： { 
        属性： '名称' ，
        值    ： “爱德” 
    }，
    groupField ： “年龄” ，
    groupDir ： “倒序” 
}）;

我们刚刚创建的存储，数据将被排序的第一个名称，然后ID，它会被过滤，只包括“爱德”的名称和数据将被递减的顺序按年龄分组的用户。这很容易改变排序，过滤和分组在任何时间通过存储API。对于现场演示，看到的排序分组过滤商店的例子。

代理

代理所使用的存储处理模型数据加载和节能。有两种类型：代理客户端和服务器。客户端代理的例子，包括数据存储在浏览器的内存和本地存储，使用HTML 5的本地存储功能可用时的记忆。服务器代理处理一些远程服务器编组的数据和例子包括阿贾克斯，JSONP和休息。

代理可以直接定义一个模型，像这样：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'age', 'gender'],
    proxy: {
        type: 'rest',
        url : 'data/users',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

/ /使用用户模型的代理
分机。创建（Ext.data.Store' ， { 
    模型： “用户” 
}）;

这有助于我们在两个方面。首先，它很可能是每家商店使用的用户模型，将需要加载的数据相同的方式，使我们避免重复每个商店的代理定义。第二，我们现在可以载入和保存模型数据没有存储：

/ /给了我们一个用户类参考
VAR  用户 =  分机。ModelMgr 。getModel （'用户' ）;

VAR ED =  20070114 。创建（'用户' ， { 
    名称： “埃德斯宾塞，
    年龄： 25 
}）;

/ /我们可以节省直接，而无需添加他到商店，因为我们
/ /配置RestProxy会自动发送一个POST请求的URL /用户
版。保存（{ 
    成功： 函数（ED ） { 
        控制台日志（“保存埃德他的身份证！” 。的getId （））; 
    
} } ）;

/ /加载用户1，用它做的东西（执行1 GET请求/用户/ 1）
用户。负载（1 ， { 
    成功： 功能（用户） { 
        控制台。日志（“加载的用户1：”  + 用户。（'名称' ））; 
    } 
}）;

也有代理，利用HTML5的新功能优势- LocalStorage和SessionStorage的。虽然旧的浏览器不支持HTML5的这些新的API，他们是那么有用了很多的应用，将受益于他们的存在极大。

模型的例子，直接使用代理

协会

协会API模型可以连在一起。大多数应用程序处理许多不同的模式，几乎都是有关模型。博客创作应用程序可能有用户，文章和评论的模式。每个用户创建数和每个职位收到的评论。我们可以表达像这样的关系：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
    proxy: {
        type: 'rest',
        url : 'data/users',
        reader: {
            type: 'json',
            root: 'users'
        }
    },

    对于hasMany ： “邮报”  / /速记：“邮报”，名称：模型'职位'} 
}）;

分机定义（'贴' ， { 
    延长： “Ext.data.Model' ，
    字段： [ 'ID' ， 'USER_ID' ， '标题' ， '身体' ]，

    proxy: {
        type: 'rest',
        url : 'data/posts',
        reader: {
            type: 'json',
            root: 'posts'
        }
    },
    belongsTo: 'User',
    hasMany: { model: 'Comment', name: 'comments' }
});

分机定义（'评论' ， { 
    延长： “Ext.data.Model' ，
    字段： [ 'ID' ， '的post_id' ， '名' ， '消息' ]，

    belongsTo的： 'POST'  
}）;

可以很容易地表达您的应用程序中的不同型号之间的丰富关系。每个模型可以与其他车型有任何关联的数目和你的模型可以定义任何顺序。一旦我们有一个模型实例，我们可以很容易地遍历相关的数据 - 例如，如果我们想要记录每个岗位上作出的一个给定用户的所有意见，我们可以这样做：

/ /加载用户ID为1的相关文章和评论，使用用户的代理
用户。 
    成功： 功能（用户） { 
        控制台日志（“用户：”  + 用户。（'名称' ））;

        用户。职位（）。每个（函数（后） { 
            控制台。日志（“发表评论：”  + 职位。（'标题' ））;

            寄）（功能（评论） { 
                控制台。日志（评论。（'消息' ））; 
            }）; 
        }）; 
    
} } ）;

每个以上结果，我们创造了一个新的功能被添加到模型的hasMany协会。我们宣布我们在上面的片段，每一个用户模式的hasMany文章，其中新增的user.posts（）的功能。调用user.posts（）返回一个存储配置与Post模型。反过来，邮政模型得到1 评论（）函数，因为对于hasMany评论协会成立。

协会是加载数据的不只是帮助 - 他们是太有用创造新的记录：

用户。职位。（）（{ 
    标题： “Ext JS的4.0 MVC架构，
    身体： '\'一个伟大的想法，构建您的Ext JS的应用，利用内置在MVC架构......“ 
}）;

用户。职位（1）同步（）;

在这里，我们实例化一个新的岗位，这是自动获得用户ID user_id字段。调用同步（）保存新的邮政通过其配置的代理 - 这，又是一个异步操作，如果操作完成时，要通知，你可以传递一个回调。

belongsTo的关联模型也产生新的方法，这里我们可以如何使用这些：

/ /获得用户参考后的belongsTo关联
后的getUser （函数（用户） { 
    控制台。日志（刚刚从后用户参考：'  + 用户获得（'名称' ））
}）;

/ /尝试改变后的    
          用户更新' ）; 
        }   { 
            控制台。日志（邮政\“用户不能更新' ）; 
        
    } } 
}）;

再次，加载函数（的getUser）是异步的，需要一个回调函数来得到用户实例。SETUSER方法简单更新foreign_key（在这种情况下的user_id）到100，并保存后的模型。像往常一样，回调可以通过在已完成保存操作时，将触发 - 无论成功与否。

载入中嵌套数据

你也许会奇怪，为什么我们通过了一项成功的功能的User.load呼叫，但没有访问用户的文章和评论时，这样做。这是因为上面的例子中，假定当我们提出要求得到用户的服务器返回的用户数据，在所有嵌套的文章和评论。通过成立协会象我们上面那样，该框架可以自动解析出嵌套在一个单一的请求数据。而不是使用户数据，另外的文章数据，然后更多的请求加载每发表的评论的请求，我们可以返回所有的数据，在这样一个单一的服务器响应：

{ 
    成功： 为true ，
    用户： [ 
        { 
            ID ： 1 ，
            名称： “爱德” ，
            年龄： 25 ，
            性别： “男性” ，
            职位： [ 
                { 
                    ID    ： 12 ，
                    标题： “所有数据在Ext JS 4 ，
                    身体： “已经看到最改进的一个领域......” ，
                    评论： [ 
                        { 
                            ID ： 123 ，
                            名称： “乔布斯” ，
                            消息： “还有一件事' 
                        } 
                    ] 
                } 
            ] 
        } 
    ] 
}

数据全部自动解析框架。可以很容易地配置模型的代理加载数据从几乎任何地方，和他们的读者来处理几乎任何响应格式。至于用Ext JS 3，模型和商店都使用整个框架由许多组件这样一个网格，树和形式。

协会和验证的关系的模型，使用工作的例子演示。

当然，它可能在非嵌套的方式来加载数据。这可能是有用的，如果你需要“懒加载”的关系数据，只有当它需要。就让我们像以前加载的用户数据，除非我们假设响应只包含用户数据没有任何相关文章。然后我们将添加一个调用user.posts（），load（）方法。在我们得到相关的POST数据的回调：

/ /载入ID用户的代理用户
。负载（1 ， { 
    成功： 函数（用户） { 
        控制台日志（“用户：”  + 用户。（'名称' ））;

        用户1 / /加载的职位，使用邮政的   
                  文章：“  + 职位。（'标题' ））;

                    寄）（功能（评论） { 
                        控制台。日志（评论。（'消息' ））; 
                    }）; 
                }）; 
            
        } } ）; 
    
} } ）;

对于一个完整的例子见懒惰协会

验证

4种型号的Ext JS验证其数据的支持更丰富，成为了很多。为了证明这一点，我们要建立在以上协会的例子，我们使用。首先，让我们添加一些验证的用户模型：

分机定义（'用户' ， { 
    延长 “Ext.data.Model' ，
    字段： ...

    validations: [
        {type: 'presence', name: 'name'},
        {type: 'length',   name: 'name', min: 5},
        {type: 'format',   name: 'age', matcher: /\d+/},
        {type: 'inclusion', name: 'gender', list: ['male', 'female']},
        {type: 'exclusion', name: 'name', list: ['admin']}
    ],

    代理： ... 
}）;

验证字段定义遵循相同的格式。在每一种情况下，我们指定一个字段和一个验证类型。在我们的例子中验证期待name字段是目前至少有5个字符长度，年龄字段是一个数字，无论是“男性”或“女”性别领域，用户名是任何东西，但“管理员”。有些验证采取额外的可选配置 - 例如长度验证，可以采取min和max属性，格式匹配，等有五个Ext JS的内置验证，并添加自定义的规则是很容易的。首先，让我们迎接建权：

存在的根本保证该字段有一个值。不要零计数作为一个有效的价值，但空字符串。
长度确保一个字符串之间的最小和最大长度。这两个约束是可选的。
格式可确保一个字符串匹配一个正则表达式格式。在上面的例子中，我们确保年龄字段是由至少一个字母后面的4个数字。
列入确保值是在一个特定的值（例如确保性别是男性或女性）集。
排除，确保值是没有一套具体的值（例如像“管理员”黑名单用户名）之一。

现在，我们已经掌握不同的验证做什么，让我们尝试对用户实例中使用它们。我们将创建一个用户，并针对它运行的验证，并指出任何故障：

/ /现在让我们试着创建一个新用户，许多验证错误，我们可以
var目录NEWUSER =  20070114 。创建（'用户' ， { 
    名称： 'admin'的，
    年龄： 二十九个' ，
    性别： '不是一个有效的性别' 
}）;

/ /我们刚刚创建的新用户上运行一些验证
VAR 错误= NEWUSER ，验证（）;

控制台日志（用户有效吗？“ ，错误。参考isValid （））;  / /返回“假”，因为有验证错误
控制台日志（“所有错误” ，错误。项目）;  / /返回的数组这个模型的实例上发现的所有错误

控制台日志（“时代错误” ，错误。getByField （'年龄' ））;  / /返回的年龄字段错误