Ext JS 4:模型剖析

簡介：這是Ext JS 4:模型剖析的詳細頁面，介紹了和php,有關的知識、技巧、經驗，和一些php源碼等。

class='pingjiaF' frameborder='0' src='http://biancheng.dnbcw.info/pingjia.php?id=327009' scrolling='no'>

如果你在跟蹤Ext JS動態，你可能已經知道，在Ext JS 4中有一個全新的資料包。新的資料包在Ext JS 3的基礎上，增加了大良的新功能。近期我們在部落格上介紹了新的資料包，今天我們將深度探討新的Model類。

　　幾乎每一個Model類就代表了應用程式中持久化的資料類型。例如，在電子商務應用程式可能包含使用者、產品、訂單等模型，而每個模型包含一些欄位以及允許應用操作這些資料的函數。例如，一個訂單模型可以包含一個"shipToCustomer"的函數用來實現配送流程。

　　Ext JS 3.x之前的版本有一個Record類，它與Model類非常類似。所不同的是，Record類雖然也包含欄位和函數，但Model類功能更強大。今天，我們將介紹Model類的死個主要功能：欄位、代理、關係和驗證。

　　欄位

　　每個模型都由一個或多個欄位組成。簡單來說，一個欄位就是一個名字，如"id"、"email"和"phone"是使用者模型的欄位。它們可以有一個類型（int、float、string或auto），甚至可以有一個轉換函式用來編輯它們的值。例如，使用者的身高，我們可以通過一個函數將它從英寸轉換為厘米。

　　下面代碼示範了如何建立一個只有3個欄位的簡單使用者模型。在第一個欄位中，我們將其類型設定為"int"，意味著它應該是一個整數。在第二個欄位中，我們將不指定類型，這以為著它將使用"auto"作為預設類型。"auto"類型表示接受任何傳遞給它的資料。在第三個欄位中，雖然我們也將它設定為"int"類型，但我們提供了一個轉換函式用來將英寸值轉換為厘米值。

　　1 Ext . regModel ( ' User ' , {

　　2 fields : [

　　3 { name : ' id ' , type : ' int ' } ,

　　4 ' name ' ,

　　5 {

　　6 name : ' height ' ,

　　7 type : ' int ' ,

　　8 convert : function ( inches ) {

　　9 return Math . round ( inches * 2 . 54 ) ;

　　10 }

　　11 }

　　12 ]

　　13 } ) ;

　　現在我們可以很簡單的建立一個使用者執行個體來觀察欄位定義如何影響到他們的資料：

　　1 var abe = new User ( {

　　2 id : 123 ,

　　3 name : ' Abe Elias ' ,

　　4 height : 76

　　5 } ) ;

　　6

　　7 console . log ( abe . get ( ' id ' ) ) ; // logs 123 (a JavaScript Number object)

　　8 console . log ( abe . get ( ' name ' ) ) ; // logs 'Abe Elias' (A JavaScript String object)

　　9 console . log ( abe . get ( ' height ' ) ) ; // logs 193 (inches converted to centimeters)

　　使用模型的簡單一實例非常簡單，但是，一個應用程式通常需要載入或儲存大量資料，因此，我們需要使用到代理。

　　代理

　　在Ext JS 4中，代理可以從不同的資料來源載入或儲存資料。譬如，可以使用Ajax，也可以使用HTML5的localStorage，或儲存在記憶體中的資料。在Ext JS 4中定義了一系列在預設情況下使用的代理，你也可以根據需要，輕鬆的建立自己的代理。讓我們看看，如何在使用者模型中建立代理：

　　1 Ext . regModel ( ' User ' , {

　　2 fields : [ ' id ' , ' name ' , ' email ' ] ,

　　3

　　4 proxy : {

　　5 type : ' rest ' ,

　　6 url : ' / users ' ,

　　7 reader : ' json '

　　8 }

　　9 } ) ;

　　直接在模型中定義代理是Ext JS 4的新功能，這意味著我們可以不用象Ext JS 3那樣，需要建立一個Store，就可以很輕鬆的載入或儲存資料。

　　在上面的代碼中，使用者模型使用了RestProxy代理，它將使用AJAX從伺服器中載入或儲存資料。它會根據提供的基本地址自動的構建RESTful地址（上面例子的是"/users"）。我們也可以建立一個使用JsonReader的代理，在使用者模型執行個體中處理伺服器響應和解碼資料。在這種情況下，我們知道伺服器將返回JSON資料，因此需要使用JsonReader。

　　讓我們來載入一個使用者模型：

　　1 // GET /users/123

　　2 User . load ( 123 , {

　　3 success : function ( user ) {

　　4 console . log ( user . get ( ' name ' ) ) ;

　　5 }

　　6 } ) ;

　　上面的代碼將從地址"/user/123"載入資料，這是根據我們將id傳遞給User.load函數構造出來的地址。接著，JsonReader將響應的資料解碼到使用者物件。伺服器返回的資料格式如下（使用的是上面log執行個體的代碼）：

　　1 // response from GET /users/123

　　2 {

　　3 " id " : 123 ,

　　4 " name " : " Aaron Conran " ,

　　5 " email " : " aaron@sencha.com "

　　6 }

　　不要輕易滿足，我們將介紹更高等級的資料關聯。

　　關係

　　在一個應用中通常都會有多個模型，而且他們都不是單獨存在的。在模型之間都會存在關聯，例如，系統中的使用者都會有訂單，而每個訂單又是由訂單項組成。Ext JS 4為我們提供了簡單而直觀的API，從而使我們可以在用戶端表現這些關係。讓我們建立以下3個模型：

　　1 // each User hasMany Orders

　　2 Ext . regModel ( ' User ' , {

　　3 fields : [ ' id ' , ' name ' , ' email ' ] ,

　　4 proxy : {

　　5 type : ' rest ' ,

　　6 url : ' / users ' ,

　　7 reader : ' json '

　　8 } ,

　　9

　　10 hasMany : ' Orders '

　　11 } ) ;

　　12

　　13 // each Order belongsTo a User, and hasMany OrderItems

　　14 Ext . regModel ( ' Order ' , {

　　15 fields : [ ' id ' , ' user_id ' , ' status ' ] ,

　　16 belongsTo : ' User ' ,

　　17 hasMany : ' OrderItems '

　　18 } ) ;

　　19

　　20 // each OrderItem belongsTo an Order

　　21 Ext . regModel ( ' OrderItem ' , {

　　22 fields : [ ' id ' , ' order_id ' , ' name ' , ' description ' , ' price ' , ' quantity ' ] ,

　　23 belongsTo : ' Order '

　　24 } ) ;

　　現在，應用程式已經知道相關模型及其關係，下面看看我們如何使用它們。現在我們擴充一下上面代理一節的例子，讓我們伺服器響應的資料格式如下：

　　1 {

　　2 " id " : 123 ,

　　3 " name " : " Aaron Conran " ,

　　4 " email " : " aaron@sencha.com " ,

　　5 " orders " : [

　　6 {

　　7 " id " : 1 ,

　　8 " status " : " shipped " ,

　　9 " orderItems " : [

　　10 {

　　11 " id " : 2 ,

　　12 " name " : " Sencha Touch " ,

　　13 " description " : " The first HTML5 mobile framework " ,

　　14 " price " : 0 ,

　　15 " quantity " : 1

　　16 }

　　17 ]

　　18 }

　　19 ]

　　20 }

　　當我們載入使用者資料時，相關的訂單和訂單項資料會與它一起載入，這樣就能使我們的代碼實現互動：

　　1 User . load ( 123 , {

　　2 success : function ( user ) {

　　3 console . log ( user . get ( ' name ' ) ) ; // "Aaron Conran"

　　4 console . log ( user . orders ( ) . getCount ( ) ) ; // "1" -- there is only 1 order in the response above

　　5

　　6 // we can iterate over the orders easily using the Associations API

　　7 user . orders ( ) . each ( function ( order ) {

　　8 console . log ( order . get ( ' status ' ) ) ; // "shipped"

　　9

　　10 // we can even iterate over each Order's OrderItems:

　　11 order . orderItems ( ) . each ( function ( orderItem ) {

　　12 console . log ( orderItem . get ( ' title ' ) ) ; // "Sencha Touch"

　　13 } ) ;

　　14 } ) ;

　　15 }

　　16 } ) ;

　　關係API是Ext JS 4中最強大的功能之一。因為Sencha Touch的資料包和Ext JS 4是相同的，因為你可以下載Sencha Touch並查看與HasMany或 Belongs的相關API文檔。

　　驗證

　　今天我們要介紹的最後一個共嫩是驗證。在Ext JS 3，只有在表單中才可以進行驗證。但在上面的執行個體代碼中，我們操縱的資料都不需要表單，因此我們需要在模型層級進行驗證。幸運的是，Ext JS已經支援這一點，讓我們來看看：

　　1 Ext . regModel ( ' User ' , {

　　2 fields : [ ' id ' , ' name ' , ' email ' , ' height ' ] ,

　　3

　　4 validations : [

　　5 { type : ' presence ' , field : ' id ' } ,

　　6 { type : ' length ' , field : ' name ' , min : 2 } ,

　　7 { type : ' format ' , field : ' email ' , matcher : / [ a - z ] @ [ a - z ] . com / }

　　8 ]

　　9 } ) ;

　　在上面代碼中，我們在使用者模型設定了3個簡單的驗證。首先，"id"欄位被設定為必須是存在的；然後，"name"欄位的長度至少需要2個字元；最後，我們使用Regex驗證"emali"欄位。

　　我們可以通過這些驗證確保模型的資料是正確。在下面代碼，我們將建立一個沒有"id"，使用者名稱也不是有效資料的使用者，並要求它進行驗證：

　　1 var ed = new User ( {

　　2 email : " ed@sencha.com "

　　3 } ) ;

　　4

　　5 var validation = ed . validate ( ) ;

　　6

　　7 console . log ( validation . isValid ( ) ) ; // false

　　8

　　9 // we can easily output or manipulate any validation errors

　　10 validation . each ( function ( error ) {

　　11 console . log ( error . field + " " + error . message ) ;

　　12 } ) ;

　　13

　　14 // in this case, the output looks like this:

　　15 " id must be present "

　　16 " name is the wrong length "

　　瞭解更多

　　我們們已經瞭解了新的模型類的四大基石：欄位、代理、關係和驗證。掌握好這4個概念可以讓你使用Ext JS 4或Sencha Touch建立更好的應用程式。要瞭解更多資料包的資訊，可以看看我們最近的部落格文章或者閱讀Sencha Touch的文檔。

　　原文：http://www.sencha.com/blog/ext-js-4-anatomy-of-a-m odel/

“Ext JS 4:模型剖析”的更多相關文章 》

愛J2EE關注Java邁克爾傑克遜視頻站JSON線上工具

http://biancheng.dnbcw.info/php/327009.html pageNo:13