ExtJS4.x数据模型之Model

56 篇文章 0 订阅
27 篇文章 0 订阅

1. 基本概述
    ExtJS不仅有令人眩目的UI组件还有非常完善的数据模型,它将整个数据读取过程分解为几个相互配合的独立部分,可以根据数据结构的不同和获取方式的不同,对这些部分进行灵活的组合,最终达到灵活使用数据的目的。
    其中,Ext.data.Model数据实体模型是真实世界中实体对象在应用系统中的反映,它包含字段集和处理数据的函数,它的前身是ExtJS 3.x以及以前版本中的Ext.data.Record类,如图:
  
2. 创建、实例化Model
    ExtJS4.x数据模型中的Model其实可以简单的理解为DB中的Table、Java中的Class等,我们通过一个简单的例子来了解下。
1. (function() {
2.     Ext.onReady(function() {
3.         Ext.define('person', {
4.             extend: 'Ext.data.Model',
5.             fields: [{
6.                 name: 'name',
7.                 type: 'auto'
8.             }, {
9.                 name: 'age',
10.                 type: 'int'
11.             }, {
12.                 name: 'email',
13.                 type: 'auto'
14.             }]
15.         });
16. 
17.         Ext.regModel('user', {
18.             fields: [{
19.                 name: 'name',
20.                 type: 'auto'
21.             }, {
22.                 name: 'age',
23.                 type: 'int'
24.             }, {
25.                 name: 'email',
26.                 type: 'auto'
27.             }]
28.         });
29. 
30.         var p = new person({
31.             name: 'Elvin.Cracker',
32.             age.com'
34.         });: 24,
33.             email: 'elvin.cracker@gmail
35.         // alert(p.get('name'));
36. 
37.         var p1 = Ext.create('person', {
38.             name: 'Elvin.Cracker',
39.             age: 24,
40.             email: 'elvin.cracker@gmail.com'
41.         });
42.         // alert(p1.get('age'));
43. 
44.         // var p = Ext.ModelManager.create({
45.         var p2 = Ext.ModelMgr.create({
46.             name: 'Elvin.Cracker',
47.             age: 24,
48.             email: 'elvin.cracker@gmail.com'
49.         }, 'person');
50.         // alert(p2.get('email'));
51. 
52.         alert(person.getName());
53.     });
54. })();
    在上面的例子中,我们介绍了两种方式创建Model类,一种是使用Ext.define的方式,另外一种是Ext.regModel的方式。在MVC的设计过程当中第一种显然不是最合适的,因为每次都要写继承Ext.data.Model,其中Ext.regModel的返回值其实就是Ext.data.Model对象。www.2cto.com
    除此之外,我们也介绍了三种方式创建Ext.data.Model的实例对象,第一种方式通过new关键字创建,第二种方式使用Ext.create方式创建,第三种使用Model的统一管理类Ext.ModelManager来创建,这个使用的是Ext.ModelManager的别名Ext.ModelMgr,效果是一样的。
3. 数据验证
    数据验证(Validation)也是非常重要、而且使用频繁的一个知识点,我们还是先通过一个简单的例子了解下。
1. (function() {
2.     Ext.data.validations.lengthMessage = '错误的长度';
3.     Ext.onReady(function() {
4.         Ext.apply(Ext.data.validations, {
5.             age: function(config, value) {
6.                 if (value === undefined || value === null) {
7.                     return false;
8.                 }
9. 
10.                 var min = config.min;
11.                 var max = config.max;
12.                 if (min <= value && value <= max) {
13.                     return true;
14.                 } else {
15.                     this.ageMessage = this.ageMessage + ', 他(她)的范围应该在[' + min + '~' + max + ']';
16.                     return false;
17.                 }
18.             },
19.             ageMessage: '错误的年龄大小'
20.         });
21. 
22.         Ext.define('person', {
23.             extend: 'Ext.data.Model',
24.             fields: [{
25.                 name: 'name',
26.                 type: 'auto'
27.             }, {
28.                 name: 'age',
29.                 type: 'int'
30.             }, {
31.                 name: 'email',
32.                 type: 'auto'
33.             }],
34.             validations: [
35.                 {type: 'length', field: 'name', min: 2, max: 6},
36.                 {type: 'age', field: 'age', min: 0, max: 150}
37.             ]
38.         });
39. 
40.         var p = Ext.create('person', {
41.             name: 'Elvin.Cracker',
42.             age: -24,
43.             email: 'elvin.cracker@gmail.com'
44.         });
45. 
46.         var errors = p.validate();
47.         var message = [];
48.         errors.each(function(v) {
49.             message.push(v.field + ' ' + v.message);
50.         });
51.         alert(message.join('\n'));
52.     });
53. })();
     在上面的例子中,我们使用了两种数据验证的方式,第一种为ExtJS自带的验证方式,另外一种为我们自定义的方式。ExtJS数据验证是通过validations实现的,其中验证长度官方提供了使用方法:
1. validations: [{type: 'length', field: 'name', min: 2}]
    但是在大多数情况下,官方提供的数据验证的方式并不能满足我们的日常应用,我们就需要自定义数据验证。我们可选的方式大概有两种,第一种我们可以自定义一个类,然后继承validations,再扩展其功能,第二种我们通过改造原生类的方式进行实现。
1. apply( Object object, Object config, [Object defaults] ) : Object
    ● 第一个参数是指所要扩展的原生类

    ● 第二个参数是指要扩展的属性
    ● 第三个参数是指传递的默认参数
    其中,我们要区分Ext.apply和Ext.applyIf,Ext.apply所以定的属性即使和原生类有相同的,也不会覆盖,而Ext.applyIf则会覆盖原生类属性。扩展属性的方法如何写呢?我们之需要看下原生类提供的基本方法的源代码,依样画葫芦即可。

转自:http://www.2cto.com/kf/201206/136071.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值