Extjs 4.2使用心得 --- store和reader提示

標籤：style   blog   color   使用   io   資料   ar   代碼   

　　最近老大要求使用Extjs寫前端，故研究了一番。這玩意功能比起jquery-ui等確實功能強大很多，效果也比較高大上，但是確實比較難使用。本人智商欠費各種坑都跳遍了才試出成果，現主要記錄下store和reader的心得。

　　在介紹store之前先說下Model，Model代表應用程式管理的一些對象。例如，我們想在系統中建模一個現實世界，我們將為這世界中的一些物體像使用者、產品和汽車等對象定義一個Model，這些Model對象將被系統註冊，被Store（倉庫）使用，然後這些倉庫又被 Ext中許多與資料繫結的組件所使用。

　　Store 大意是: 倉庫、儲存的意思. Store類封裝了一個用戶端緩衝,用於儲存 Model 對象. Stores 通過一個代理 Proxy 來載入資料, 並提供函數來 排序, 過濾 以及查詢 內部所包含的 model 執行個體.

　　建立Store很簡單，只需要傳入 Model 以及用來載入/儲存 資料的Proxy作為配置項即可:

 // 建立一個store要使用的 model Ext.define(‘User‘, {     extend: ‘Ext.data.Model‘,     fields: [         {name: ‘id‘, 　　type: ‘int‘},         {name: ‘name‘,　　type: ‘string‘},         {name: ‘age‘,　　type: ‘int‘}     ] }); var myStore = Ext.create(‘Ext.data.Store‘, {     model: ‘User‘,     proxy: {         type: ‘ajax‘,         url: ‘/users.json‘,         reader: {             type: ‘json‘         }     },     autoLoad: true });

在上面的例子中,我們配置了一個 AJAX 代理,從 url ‘/users.json‘ 載入資料. 並告訴Proxy使用JsonReader來解析伺服器返回的資料為Model對象.

　　reader 通常用於翻譯資料，使其被載入為 Model 執行個體或Store, 該資料一般是一個AJAX請求的響應資料. 一般情況下不需要直接建立一個Reader執行個體， 因為Reader總是和Proxy一起使用， 且其將使用Proxy的reader 配置屬性配置。針對上面的代碼，reader屬性將從服務端讀取資料，同時將接受如下的響應：

[    {        "id": 1,        "name": "Ed Spencer",        "age": "22"    },    {        "id": 2,        "name": "Abe Elias",        "age": "45"    }]

　　但是假如你已經有了一份定義好的JSON格式，而且看起來和我們提供的那種不太相似，那麼你可以通過JsonReader的配置選項來使其可以解析你的格式，例如，你的資料有個root節點，如下：

{    "users": [       {           "id": 1,           "name": "Ed Spencer",           "age": "22"       },       {           "id": 2,           "name": "Abe Elias",           "age": "45"       }    ]}

為瞭解析這個，我們只需要傳遞一個root配置以匹配以上的"users":

reader: {    type: ‘json‘,    root: ‘users‘}

或者更複雜的JSON格式，有些文檔資料經常會以以下結構提供資料：

{    "total": 42,    "offset": 0,    "users": [        {            "id": "ed-spencer-1",            "value": 1,            "user": {                "id": 1,                "name": "Ed Spencer",                "age": "23"            }        }    ]}

以上樣本中的記錄資料是在"users"數組中嵌套的一個額外層級，其中的每個“user”項目中都包含有額外中繼資料（例如本例中的’id‘和‘value’）. 為瞭解析以上JSON資料中的每個‘user‘項中的資料， 需要特別指定record配置，如下所示：

reader: {    type  : ‘json‘,    root  : ‘users‘,    record: ‘user‘}

響應的中繼資料

服務端可以在其響應中返回中繼資料，除了記錄資料，其中資料本身的描述資料的屬性集或用於重新設定的讀取器。 為了在響應中擷取中繼資料，需要給響應資料的根簡明加上一個‘metaData‘屬性. 中繼資料屬性可以包含任何東西， 但若Reader存在，其還支援的一個特定設定屬性:

• root: 響應中包含記錄資料的節點對應的根屬性名稱
• idProperty: 資料中的主鍵欄位屬性名稱
• totalProperty: 資料中的所有記錄數屬性名稱
• successProperty: 響應中成功狀態屬性名稱
• messageProperty: 一個可選的響應資訊的屬性名稱
• fields: 在將響應資料轉換成records之前用於重新設定Model的欄位集的配置