ExtJS：数据模型

自定义数据模型

在上一节中，我们使用Ext.define 来自定义类，通过Ext.define 定义的类都默认继承自Ext.base 类。如果我们将extend 设置为Ext.data.Model，那么定义的类就是一个数据模型类了。先定义一个简单的数据模型类 User类，代码如下：

Ext.define("MyApp.User", {

    extend : 'Ext.data.Model',

    fields : [

         {name : 'name', type : 'string'},

         {name : 'age', type : 'int'},

         {name : 'phone',type : 'string'}

    ]

});

在代码中可以看出，数据模型类其实就是一个继承自Ext.data.Model 的类。

fields 属性中定义了该模型的字段，它可以是对应到数据库中的字段。在使用的时候，数据模型包含的字段和类的属性使用方式不太相同。要访问字段的值，需要视同get 和 set 方法，例如：

var Tom = Ext.create("MyApp.User",{

    name : 'Tom',

    age : 26,

    phone : '123456789'

});

Tom.set('age',20);

Ext.MessageBox.alert('提示'，Tom.get('age'));

我们实例化User类，初始化的时候，age的值为26，然后通过set 方法设置为 20，再通过get 方法得到 age 字段的值，运行截图如下：

字段类型和转换器

在定义数据模型的时候，我们可以定义字段的类型和该类型的转换器。例如，我们将为User类添加birthday字段，在初始化的时候，我们可能会传入一个字符串类型的日期格式，这个时侯就需要我们来定义一个类型转换器，将字符串格式的日期转换为Date类型。代码如下：

Ext.define("MyApp.user",{

     extend : 'Ext.data.Model',

     fields[

        {name : 'name', type : 'string'},

        {name : 'age', type : 'int'},

        {name ： 'phone', type : 'string'},

        {

             name : 'birthday',

             type : 'date',

             convert : function(value, record){

                if(Ext.isDate(value)){

                    return value;

                }else if(Ext.isString(value)){

                    return Ext.Date.parse(value,'Y-m-d');

                }

             }

        }

     ]

});

在代码中添加了birthday字段，并为该字段设置了转换器，当传入的类型为string时，将会被转换为标准的时间类型。用法如下：

var Tom = Ext.create("MyApp.User",{

     name ：'Tom',

     age : 26,

     phone : 123456,

     birthday : '2000-01-15'

});

alert(Tom.get('birthday'));

在使用的时候，传入的是一个字符串类型的时间，当我们实例化以后，字符串日期被转换为标准的时间类型：

数据验证

我们可以使用数据模型来验证数据是否正确。在上面的例子中，我们希望phone 字段的长度在8和15之间，那么，我们需要这样修改代码：

Ext.define("MyApp.User",{

    extend : 'Ext.date.Model',

    fields ：[

        {name : 'name', type : 'string'},

        {name : 'age', type : 'int'},

        {name : 'phone', type : 'string'},

        {

              name : 'birthday',

              type : 'date',

              convert : function(value,record){

                    if(Ext.isDate(value)){

                         return value;

                    }else if(Ext.isString(value)){

                         return Ext.Date.parse(value,'Y-m-d');

                    }

              }

        }

    ],

    validations : [

       {field : 'phone',  type : 'length', min : 8, max : 15 }

    ]

});

为phone 字段添加验证，验证类型为length，最小为8，最大为15，验证的代码如下：

var Tom = Ext.create("MyApp.User",{ 

     name ：'Tom',

     age : 26,

     phone : 123456,

     birthday : '2000-01-15'

});

 var errors = Tom.validate();

 var errorMsg = [];

if(!errors.isValid()){

     errors.each(function(error){

        errorMsg.push(error.field + "          " + error.message);

     });

     Ext.Msg.alert("错误",errorMsg.join('<br/>'));

}

我们将phone的长度设置为6位，很明显是不能通过验证的。程序运行起来以后，我们会得到下面的错误：

尽管我们已经引入了汉化包，但这里的提示还是英文的，为了能让他显示为中文，我们需要手动的来将其汉化，在程序开始的时候加入代码：

Ext.date.validations.lengthMessage = "长度错误";

刷新页面，错误提示已经变成中文了：

自定义验证规则

ExtJS虽然内置了一些验证规则，但这些规则面对庞大的业务需求是远远不够的，所以EXTJS允许我们自定义一些验证规则。

在User类中，我们希望age字段的值在0到150之间，我们来自定义一个验证规则：

Ext.apply(Ext.data.validations,{

    ageMessage : '必须在0到150之间',

    age : function(config,value){

          if(value == undefined || value == null){

                 return false;

          }

          if(value < 0 || value > 150){

                return false;

          }

          return true;

    }

});

Ext.apply 方法用来将第二个参数中的属性和方法复制到第一个参数中，在这里的作用是将我们定义的age规则添加到Ext 的验证规则中。

接下来我们修改验证部分的代码，添加age验证：

validations : [

     {field : 'phone', type : 'length', min : 8, max : 15},

     {field : 'age', type : 'age', min : 8, max : 15}

]

在初始化的时候，我们将age的值设置为-26，运行程序，截图如下：

数据模型之间的关系

模型之间可以通过Ext.data.association.HasOne,belongsTo,hasMany设置彼此的关系。例如在博客管理程序中，我们需要处理用户（User），文章（Posts），评论（Comments）之间的关系：

Ext.define('Post',{

    extend : 'Ext.data.Model',

    fileds : ['id', 'user_id'],

    belongsTo : 'User',

    hasMany : {model : 'Comment', name : 'Comments'}

});

Ext.define('Comment',{

    extend : 'Ext.data.Model',

    fields : ['id', 'user_id', 'post_id'],

    belongsTo : 'Post'

});

Ext.define('User',{

    extend : 'Ext.data.Model',

    fields : ['id'],

    hasMany : ['Post',{model : 'Comment', name : 'Comments'}]

});

 你可以通过查看API来了解更多的用法，另外，他们之间的关系还可以这样定义：

Ext.define('User',{

    extend : 'Ext.data.Model',

    fields : ['id'],

    associations : [

          {type : 'hasMany', model : 'Post', name : 'Posts'},

          {type : 'hasMany', model : 'Comment', name : 'Comments'}

    ]

});

 

转载于:https://www.cnblogs.com/jinqianyueyueniao/p/6742849.html