Ext3.0新增內容系列文章之二：Ext.data.Writer簡介

上期我們的內容是關於API介面的配置，其中涉及到CRUD只是略略一提，沒有談論太多，今期再重點說說。

根據CRUD
的原則，資料或資源操作不外乎“生、變、見、滅”的四大規律，也就是說，只需要“建立（Create
）、獲取（Read
）、更新
（Update
）和銷燬（DELETE
）”四種行為便可完成對資源的處理和操作了。如果“讀”操作在Ext
中沒有題的話，那麼其他三種操作就應該歸類為“寫”的操作了。這部分的內容，在Ext
3.0
中將由Writer
來負責完成。Ext.data.DataWriter提供了增、刪、改，而“查”的實現讓Ext.data.Store與服務端框架密切通訊。Writer控制了Store了自動管理AJAX的請求，讓其成為Store CRUD操作的管道。換句話說，這個DataWriter相對於遠端CRUD操作而言，是一個在前端的初始化部分，負責寫入單個或多個的 Ext.data.Record物件。Ext.data.DataWriter是一個抽象類，一般用於讓來被繼承，例如 Ext.data.JsonWriter。我們大致看看JsonWriter是怎麼完成的。

Writer繼承自Object，是一個嶄新的Ext.data.*類，先引入一個JsonWriter
例項物件：

var settingsWriter = new Ext.data.JsonWriter({
writeAllFields: true
});

設定writeAllFields
為true
表示，記錄所有的欄位都會寫入到資料庫中去。當然，如果有特定ORM
方面，可能就要設定其為false
以適應ORM
的策略。writeAllFields預設是false。設為true的話，就表示讓DataWriter返回所有那個記錄的所有欄位，不僅僅是修改的那些欄位。true就是記錄那些修改的欄位而已。

明顯，Writer類的關鍵方法是write(action, params, rs)方法。action引數代表[CREATE|UPDATE|DESTROY]的字串，Writer類只需要有DataWriter.update、DataWriter.create、DataWriter.destroy的proxy就可以囊括“寫”的操作；params是要寫入的hash引數；rs是要寫的資料物件（可以為list的資料物件）。Ext.data.DataWriter本身有幾個模版方法render()、updateRecord()、createRecord()、destroyRecord()，讓繼承它的子類重寫使用。render()表示寫事件的最後動作。將寫入的資料物件新增到引數，該方法也說明了送抵的資料物件會依據使用者在DataReader配置的後設資料資訊產生真正的渲染資料，有引數“data”和“params”。

值得一提的是，JsonWriter配置項
true
表示對.DataWriter.toHash()雜湊資料進行Ext.util.JSON.encode()。 預設為true
。當使用Ext.data.DirectProxy的時候，不同於Ext.Direct.JsonProvider有自己的JSON編碼，所以該配置項要設定為false
。
此外，如果你使用的是Ext.data.HttpProxy，設定該項為false
就會使得HttpProxy採用
Ext.Ajaxrequest配置引數的jsonData傳輸資料，而非params。
當使用Ext.data.Storerestful的Store，一些服務端框架就會認為資料從jsonData的通道經過。如果採用這樣的機制的話，應該讓底層的連線物件完成編碼的工作（如Ext.Ajax），把encode:
設為false
。

通過proxy物件啟用Store物件來控制writer，也就是配置一個url：

var proxy = new Ext.data.HttpProxy({
url: `app.php/users`
});

對於更細顆粒的控制，proxy也可配置成為api，也就是定義CRUD
的資源位置，並告訴Proxy
讓Writer
得知操作地點的URL
。我們的指導思想傾向於與REST
架構的。

var settingsProxy = new Ext.data.HttpProxy({
api: {
read: `app.php/settings/view`,
create : `app.php/settings/create`,
update: `app.php/settings/update`,
destroy : `app.php/settings/destroy`
}
});

然後就是Writer
、Proxy
組裝一起：

var settingsStore = new Ext.data.Store({
id: `setting`,
proxy: settingsProxy,
reader: settingsReader,
writer: settingsWriter,
…
});

當上層的元件通過Ext.Writer
來提交某些資料的時候，較理想的方法是統一一個地方來進行資料欄位驗證的工作。假設有一個名為SettiongGrid
，我們可以這樣關聯事件(relay
events)
，請注意relayEvents()方法的使用：

initComponent : function() {
this.viewConfig = {
forceFit: true
};
this.relayEvents(this.store, [`destroy`, `save`, `update`]);
this.tbar = this.buildTopToolBar();
SettingsGrid.superclass.initComponent.call(this);
},
… …

 

例子方面，Ext
發行包本身就有，我們可以去examples/resetful
和examples/writer
下面看看，簡單演示了Rest
資源與MVC
框架是怎麼對映其中的資源路徑和操作行為的。如果談到PHP
的框架，這就是一個特定的場合，基本上可以有以下幾個類：

 

• Model        
  包含ORM
  服務的物件
• Request     
  處理請求的引數
• Controller  
  根據已知url
  派遣動作
• Response   
  輸出符合格式的檢視，如JSON

 

通過唯一的切入口來操作整個框架（博主聽上去感覺有點好奇），而框架內部的類都是由Controller
來動態載入的，通過某一動作指明不同的類。不過url
就依據URL
對映的使用，表現得千變萬化，而切入點就只有一個。

 

部分內容根據jacob.andresen@gmail.com的“CRUD_in_extjs_3_0.pdf”的來源而翻譯。