作者：
Email：[email protected]
轉載請注明出處:
資料包主要負責加載和儲存你應用程式的所有資料，它包含41個類，但是其中三個是最重要的—— Model，Store和Ext.data.proxy.Proxy。這三個類幾乎在每個應用程式都有使用，并且有很多衛星類作支援。
data包的核心是Ext.data.Model。一個Model代表了一些資料的類型 —— 例如一個電子商務可能Users，Products和Orders模型。最簡單的說，一個Model就是一個字段和資料的集合。現在來看看一個Model類的4個主要部分 —— Field，Proxy，Association和Validation。
讓我們看看怎麼建立一個Model：
Model通常和Store一起使用，Store就是Model執行個體的集合。建立一個Store并且加載它的資料很簡單：
我們來給我們的Store配置一個Ajax Proxy，告訴它加載資料url以及解析資料的Reader。這個例子中，我們的伺服器傳回的是JSON，是以我們需要設定一個Json Reader去讀取回複。Store自動從users.json。users.json url應該傳回一個像下邊的JSON字元串：
Store也可以從内部加載資料。在内部，Store将每一個傳過去的對象轉換成Model執行個體：
Store可以執行排序、過濾和本地分組，以及支援遠端排序、過濾和分組：
在我們剛剛建立的Store中，資料會先以name，然後以id排序；并且被過濾到隻剩下name包含‘Ed’的使用者，并且資料會以age做降序分組。可以通過Store的API在任意時間友善的改變排序、過濾和分組。
Store采用Proxy控制Model資料的加載和儲存。有兩種類型的Proxy：Client和Server。Client的例子是存儲資料到浏覽器記憶體的Memory Proxy和使用HTML5本地存儲特性的Local Storage Proxy。Server Proxy處理遠端服務的資料解碼，它的例子有Ajax Proxy，JsonP Proxy以及Rest Proxy。
Proxy可以直接定義在一個Model中，例如：
這有兩點好處。第一，每一個使用User Model的Store将會以同樣的方式加載它所需要的資料，是以避免了為每一個Store重複定義Proxy。第二，我們能夠不通過Store加載和儲存Model資料。
還有一些使用HTML5新特性的Proxy —— LocalStorage和SessionStorage。盡管較早的浏覽器并不支援這些新的HTML5 API，它們是如此的有用，一大部分應用程式将會因它們的存在而受益。
Model能夠采用Associations API關聯在一起。大多說應用程式處理各種各樣的Model，并且這些Model還總是相關聯。一個部落格應用可能有User、Post和Comment Model。每一個User建立多個Post，每個Post又接受多個Comment。看看我們是怎麼用Association來寫它們的模型的。
在你的應用中表述不同Model之間的關系很輕松。每一個Model可以包含和其他Model的任意數量的關聯關系，并且你的Model可以以任意順序定義。一旦我們有了一個Model執行個體，我們就可以通過它通路它關聯的資料 —— 例如，如果想把一個給定使用者的所有Post的所有Comment列印成日志，我們可以這麼做：
上面我們建立的每一個hasMany關聯都會産生一個新函數并加入到這個Model中。我們定義每個User 模型 hasMany Post，這就在User Model中添加一個posts()方法。調用user.posts()會傳回一個配置了Post Model的Store。相應的，Post Model會有一個comments()方法，因為我們給它配置了hasMany Comment。
Association不隻有助于加載資料，它還有助于建立新紀錄：
這裡我們執行個體化一個Post，它的user_id字段會被自動府城User的id。調用sync()會通過配置給它的Proxy儲存這個新的Post —— 這還是一個異步操作，如果你想當這個操作完成時受到通知，你可以給它傳入一個Callback函數。
belongsTo關聯也會在Model上生成新方法，看看我們怎麼使用：
這裡的加載函數（也就是getUser）也是異步的，你也可一個傳入一個Callback函數。setUser方法簡單地更新外鍵（foreign_key，也就這裡的user_id）為100，然後儲存Post模型，同樣，穿進去的Callback函數将會在儲存操作完成（無論成功或失敗）時被觸發。
你可能會質疑，為什麼我們給User.load傳入一個success函數，但是當我們通路User的post和comment時卻不必如此？！那是因為上邊的例子我們假設當發起一個擷取User的請求時，伺服器傳回了User資料以及它說關聯的Post和Comment資料。通過上邊的關聯設定，架構會自動解析單個請求中的嵌套資料。為避免為一個User資料發一個請求，然後請求他的所有的Post資料，之後在為每一個Post加載器Comment資料，我們可以直接讓伺服器傳回以上所有的資料：
對資料的驗證使得Ext JS 4 的模型更加豐富。為了證明，我們基于上邊講解關聯的例子做進一步改進。首先向User模型添加一些驗證：
驗證的格式定義和字段的相同。在上邊的每個例子中，我們為驗證指定一個字段和類型。上邊例子中的驗證意思是name字段必須存在，且至少有5個字元，age字段是個數字，gender字段要麼是“male”，要麼是“female”，username可以是除了“admin”之外的任何值。一些驗證還需要其他的額外配置，例如length驗證需要min和max屬性，format驗證需要matcher，等等。Ext JS 4 有5種内建的驗證方式，并且添加定制化的驗證規則也很簡單。下邊看一下這些内建的驗證方式：
presence： 確定字段有值。零算作有效值，但是空字元串不算
length： 確定字元串長度在min和max之間。這兩個都是可選的。
format： 確定一個字元串比對一個正規表達式。上邊的例子意思是確定一個字段是由4個數字後跟至少一個字元組成。
inclusion： 確定一個值位于一個指定的集合中（例如，確定性别是male或者female）
exclusion： 確定一個值不在一個指定的集合中（例如黑名單使用者名，像’admin‘）
現在我們對不能的驗證做什麼事情有一個了解了，讓我們在一個User執行個體上使用一下。首先建立一個user，然後運作驗證方法，注意出現的錯誤：
這裡的關鍵函數式validate()，它運作所有配置的驗證，然後傳回一個Errors對象。Errors對象包含任何發現的錯誤的集合，再加上一些友善的方法，例如isValid()，如果在任何字段上都沒有錯誤，它會傳回true，以及getByField()方法，它會傳回一個給定字段上出現的所有錯誤。
本章主要講述了Ext JS 4的Data包中的主要功能，從Model、Store、Proxy以及Model的關聯以及驗證等方面做了詳細介紹。通過本文的學習，你能都Ext JS 4的資料操作和互動有一個初步的認識。