数据

数据

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

数据包概述

模型和存储

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

模型架构

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

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.jsonusers.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的新功能优势- LocalStorageSessionStorage的虽然旧的浏览器不支持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 '年龄' ));  / /返回的年龄字段错误

这里的关键功能的validate(),它运行的所有配置的验证,并返回一个错误对象。这个简单的对象只是一个集合被发现的任何错误,再加上一些方便的方法,如参考isValid() -返回true,在任何领域,如果有任何错误- getByField() 返回某一特定领域的所有错误。

对于一个完整的例子,它使用验证,请参阅协会和验证

阅读更多
想对作者说点什么? 我来说一句

DATA数据数据数据

2011年12月08日 25KB 下载

数据数据数据

2016年05月24日 29KB 下载

数据恢复相关职业专用软件

2011年07月12日 265KB 下载

数据flow数据flow数据flow数据flow

2011年06月11日 437KB 下载

机器学习数据

2018年04月24日 13KB 下载

数据列表数据列表数据列表

2011年06月17日 10KB 下载

大指挥数据查办数据查办

2009年06月27日 101KB 下载

没有更多推荐了,返回首页

不良信息举报

数据

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭