Extjs系列篇（3）—-model資料模型

一、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。 二、建立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');這種方式參數上和第二個方式是相反的。 三、自訂驗證 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"));驗證後得到錯誤提示。 四、簡單資料代理 什麼是資料代理，資料代理就是來完成資料的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        %>五、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         //student18         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 })();