Extjs系列篇（3）—-model數據模型

1、Model的兩種建立方式                                                          

model就至關於java中的類，下面咱們就來用兩種方式來進行建立。

1.define方式建立model： 

1 Ext.define("person",{
2             extend:"Ext.data.Model",
3             fields:[
4                  {name:'name',type:'auto'},
5                  {name:'age',type:'int'},
6                  {name:'email',type:'auto'}
7             ]
8 });

採用這種方式，第一個參數是model的名稱，須要繼承自Ext.data.Model，同時給定字段名稱和類型。

2.採用regModel的方式建立model：

1 Ext.regModel("user",{
2             fields:[
3                  {name:'name',type:'auto'},
4                  {name:'age',type:'int'},
5                  {name:'email',type:'auto'}
6             ]
7 });

這種方式比第一種稍許簡潔，不須要繼承，由於它默認返回就是一個model。

2、建立Model的實例

建立model的實例有3種方式，model就至關於一個class，而model的實例就至關於類的對象。

1.new方式建立實例：

1 var p = new person({
2             name : 'luoxiao',
3             age:26,
4             email:"3435@12.com"
5 });

這種建立的方式和咱們java中建立對象同樣，比較形象化。

2.create方式建立實例:

1 var p1 = Ext.create("person",{
2             name : 'luoxiao',
3             age:26,
4             email:"3435@12.com"
5 });

第一個參數給定建立的model的名稱，其次給定參數，這樣就能夠建立一個實例。

3.ModelMgr建立實例：

var p2 = Ext.ModelMgr.create({
            name : 'luoxiao',
            age:26,
            email:'3435@12.com'
},'person');

這種方式參數上和第二個方式是相反的。

3、自定義驗證

Ext中給咱們提供了一些經常使用的驗證方式，可是這不能徹底知足咱們的需求，咱們能夠再此基礎上本身進行擴展，自定義驗證的一系列規則。首先咱們先擴展validation:

 1 Ext.apply(Ext.data.validations,{
 2             age : function(config,value){
 3                 var min = config.min;
 4                 var max = config.max;
 5                 if(min <= value && value<=max){
 6                     return true;
 7                 }else{
 8                     this.ageMessage = this.ageMessage+"應該在["+min+"~"+max+"]";
 9                     return false;
10                 }
11             },
12             ageMessage:'age數據出現了錯誤'
13         });

Ext.apply用於實現把一個對象中的屬性應用於另一個對象中，至關於屬性拷貝。也就是說，咱們擴展的age這個屬性的規則將會應用到Ext.data.validations中去，在age的function中，第一個參數是配置的參數屬性，第二個是傳遞的值。下面，咱們定義一個model來應用這種驗證：

 1 Ext.define("person",{
 2             extend:"Ext.data.Model",
 3             fields:[
 4                  {name:'name',type:'auto'},
 5                  {name:'age',type:'int'},
 6                  {name:'email',type:'auto'},
 7             ],
 8             validations:[
 9                  {type:"length",field:"name",min:2,max:6},
10                  {type:"age",field:"age",min:0,max:150}
11             ]
12         });

能夠看到，咱們對name的length進行了驗證，包括自定義的age，提供了最小值和最大值。

1 var p1 = Ext.create("person",{
2             name : 'luoxiao',
3             age:-26,
4             email:"3435@12.com"
5 });

這裏建立一個person的實例，age爲-26，不知足給定的驗證條件。

1 var errors = p1.validate();
2         var errorInfo = [];
3         errors.each(function(v){
4             errorInfo.push(v.field+" "+v.message);
5         });
6         alert(errorInfo.join("\n"));

驗證後獲得錯誤提示。

4、簡單數據代理

什麼是數據代理，數據代理就是來完成數據的CURD。

 1 (function(){
 2     Ext.onReady(function(){
 3         Ext.define("person",{
 4             extend:"Ext.data.Model",
 5             fields:[
 6                  {name:'name',type:'auto'},
 7                  {name:'age',type:'int'},
 8                  {name:'email',type:'auto'},
 9             ],
10             proxy:{
11                 type:'ajax',
12                 url:'lesson3/person.jsp'
13             }
14         });
15 
16         var p = Ext.ModelMgr.getModel("person");
17 
18         p.load(1, {
19             scope: this,
20             failure: function(record, operation) {
21             },
22             success: function(record, operation) {
23                 alert(record.data.name);
24             },
25             callback: function(record, operation, success) {
26             }
27         });
28     });
29 })();

這裏使用的ajax的方式去請求數據，將jsp中的數據請求到而後load進去。

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 
3       <%
4           response.getWriter().write("{name:'uspcat.com',age:26,email:'luoxiao.com'}");
5        %>

5、model的一對多

 1 (function(){
 2     Ext.onReady(function(){
 3         //teacher
 4         Ext.regModel("teacher",{
 5             fields:[
 6                {name:'teacherId',type:'int'},
 7                {name:'name',type:'auto'}
 8             ],
 9             hasMany:{
10                 //與誰有關係
11                 model:'student',
12                 name:'getStudent',
13                 filterProperty:'teacher_Id'
14             }
15         });
16 
17         //student
18         Ext.regModel("student",{
19             fields:[
20                    {name:'studentId',type:'int'},
21                    {name:'name',type:'auto'},
22                    {name:'teacher_Id',type:'int'}
23             ]
24         });
25 
26         //t.students   能夠獲得子類的一個store數據集合
27 
28     });
29 })();