原文：Top Support Tips

Seth Lemmons：使用棒極了的Awesome Font

Ext JS 6附帶了一個新的海衛一主題，可以使用Font Awesome字體作為背景圖像的圖標。不過，你知道如何通過“iconCls”和“glyph”來使用哪些相同的圖標（以及更多來自于廣泛的Font Awesome庫）嗎?

使用海衛一主題的時候

可以在諸如Ext.panel.Panel、Ext.menu.Item、Ext.button.Button等等組件中使用iconCls來設置Font Awesome字體為圖標，語法如下：

// use ‘x-fa’ to add set the font family to Font Awesome// then use “fa-{iconName}” to set the icon itselficonCls: ‘x-fa fa-star’ // the icon will be the Star icon from Font Awesome

對于組件的“glyph”配置項，語法如下：

glyph: ‘xf005@FontAwesome’ // using the unicode “f0005” for Star

所有的Font Awesome圖標都可以在Font Awesome網站內找到。

注意：“glyph”和“iconCls”配置項是互斥的。“glyph”配置項是在Ext JS 4.2中加入的，主要是解決EI6或7不支持偽元素這種情況。我們建議使用“iconCls”，而不是“glphy”，原因是Ext JS 5以上版本（只支持IE 8以上版本）所支持的瀏覽器都已經支持偽元素。最現代的圖標字體已經都會有一套CSS規則使用偽元素來將圖標應用到元素。

對于Ext.Img組件，可以通過使用autoEl配置項來封裝元素，兵使用cls或glyph來實現：

Ext.create({xtype: 'image',autoEl: 'div',cls: 'x-fa fa-star',//glyph: 'xf005@FontAwesome',alt: 'star',style: {fontSize: '36px',lineHeight: '36px'},height: 36,width: 36});

注意：對于Image的配置項，需要使用cls來代替iconCls。

不使用海衛一主題的時候

如果不使用海衛一主題，但又想在組件中使用Font Awesome圖標，可以在Sencha Cmd創建的應用程序中加入Font Awesome包。要實現這個，編輯“應用程序根目錄/app.json”文件，在requires數組內加入以下代碼：

"requires": ["font-awesome"],

這樣就可以像使用海衛一主題那樣直接在組件中使用iconCls配置項了。

Pictos圖標

還可以在app.json文件中通過請求Picto來使用Picto圖標集：

"requires": ["font-pictos"],

請求后，就可以使用以下iconCls語法來使用Picto庫的圖標了：

// pictos-{iconName} is used to set a named icon from the Pictos icon seticonCls: 'pictos pictos-home'

要了解Picto圖標的對應信息，可以查看Sencha字體包指南。

查看主題指南可以了解更多有關海衛一主題以及字體圖標的信息。

Joel Watson：保存關聯數據的另一選項

在Ext JS 5應用程序中使用關聯的時候，有許多方式可以用來保存關聯的數據。無論是喜歡保存每一個單獨的個體模型實例、創建一個自定義的Ext.data.writer.Writer實現，還是使用Ext.data.Session來創建批處理，Ext JS都提供了極大的靈活性以便你以最適合你的應用程序的的方式處理數據。

不過，在Ext JS 5中， Ext.data.writer.Writer有幾個新的特性為你提供了一種新選擇：allDataOptions和partialDataOptions。

這些配置項允許你在模型數據將要被發送到服務器時，去定義傳遞給Ext.data.Model的getData方法的選項。allDataOptions用于phantom（新）記錄（或在writeAllFields為true的時候），而partialDataOptions則用于其他方面（或writeAllFields為false的時候）。

這樣對關聯數據有什么好處呢?

下面來看兩個實體，User和Address：

Ext.define('User', {extend: 'Ext.data.Model',fields: ['firstName', 'lastName', 'age', {name: 'addressId',reference: 'Address',unique: true}],... });Ext.define('Address', {extend: 'Ext.data.Model',fields: ['street', 'city', 'state', 'postalCode'] });

在示例中，User與Address具有一對一關聯，因而在保存User的時候（無論是創建一個新用戶還是保存已修改過的已有用戶），同樣需要在同一請求中發送任何關聯的Address數據。

在Ext JS 4，處理這一情況需要通過創建自定義的Ext.data.writer.Writer來擴展getRecordData方法以調用Ext.data.Model.getAssociatedData并添加關聯數據到請求數據中。雖然該方式在Ext JS 5中也能很好的工作，但可以利用allDataOptions和partialDataOptions來完成相同的事情，不過需要保存幾行代碼：

Ext.define('User', {extend: 'Ext.data.Model',fields: [...],proxy: {type: 'ajax',url: 'user.json’,writer: {type: 'json',allDataOptions: {persist: true,associated: true},partialDataOptions: {changes: false, critical: true,associated: true}}} });

在allDataOptions配置項，指定了新建的User模型數據在發送到服務器前的預處理方式：

persist: true ->只發送持續性字段（該屬性默認值為true）。 associated: true ->包含關聯數據

對于partialDataOptions，原理是一樣的，用來指定已存在的用戶模型數據發送到服務器前的預處理方式：

changes: true -> 只包含修改過的字段(默認) critical: true -> 始終包含“關鍵”字段，而不管是否已被更改(默認) associated: true -> 包含關聯數據

當然，可以根據應用程序的需要調整這些配置項。不過，問題的關鍵是，在應用程序內創建或更新用戶時，發送到服務器的請求將包含任何關聯的數據，這太棒了。

有關詳細信息，請查看Fiddle中User和Address模型的創建和更新示例。

Joel Watson：在Ext JS 5中使用模型的Ids

在Ext JS 5，一個相當大的變化是id的生成。在Ext JS 4，默認的id的生成器不會根據idProperty自動去生成值，例如，簡單的用戶模型示例：

Ext.define('Fiddle.model.User', {extend: 'Ext.data.Model',fields: ['firstName', 'lastName', 'age'],proxy: {type: 'rest',url: 'user.json'} }); // create a new User var user = new Fiddle.model.User({firstName: 'John',lastName: 'Doe',age: 52 }); user.save();

在調用save發送請求到服務器的時候，會看到如下請求：

{age: 52,firstName: "John",lastName: "Doe" }

然而，在Ext JS 5，如果未提供id值，默認的id生成器會根據idProperty生成一個值，對于以上示例代碼，處理結果會不同：

{id: "User-1",age: 52,firstName: "John",lastName: "Doe" }

要注意，id（idProperty的默認值）現在被包含在請求中。在某些情況下，開發人員可能會在服務器端代碼中依賴Ext JS 4的行為來確定如何處理傳入的請求，在這種情況下，在Ext JS 5中的這種改變可能會引起一些沖突。

幸運的是，有許多選項可以用來處理（或左右）這種改變。

ID生成器

第一個選項（并且可能是最好的一個）是使用Ext JS中的id生成器，例如，使用Ext.data.identifier.Negative，該id生成器會產生連續的、值為負數的客戶端id值。在大多數的服務器端，id值是基于整數并是順序增加的，而由Ext.data.identifier.Negative產生的臨時id值，則很容易辨析，這樣，服務器代碼就可以很輕松的確定這是新的還是已有的Ext JS模型數據。

以上使用負數標識符的示例的處理結果可能會像以下代碼：

{id: -1,age: 52,firstName: "John",lastName: "Doe" }

示例：使用負數標識符：https://fiddle.sencha.com/#fiddle/p03

當然，如果這個都不能滿足你的需求，你可以通過擴展Ext.data.identifier.Generator來創建自己的生成器。

clientIdProperty

如果使用id生成器不符合應用程序的需求，另一個選擇就是使用已被添加到Ext.data.writer.Writer的clientIdProperty配置項。使用該配置項，就可以在創建一個新記錄并發送數據到服務器時指定一個名字作為idProperty值的關鍵字：

Ext.define('User', {extend: 'Ext.data.Model',fields: ['firstName', 'lastName', 'age'],proxy: {type: 'rest',url: 'user.json',writer: {type: 'json',clientIdProperty: 'userId'}} })

在保存用戶實例的時候，發送到服務器的數據會類似以下代碼：

{"userId": "User-1","firstName": "John","lastName": "Doe","age": 52 }

對于現有的服務器代碼依賴于id來標識新記錄的方式，該方式可保持現狀，不需要修改邏輯。

示例：使用clientIdProperty：https://fiddle.sencha.com/#fiddle/p02

transform()

最后一個選擇是在代理的writer中指定一個自定義的transform方法。transform方法需要兩個參數“data”和“request”，并預期要返回發送到服務器的數據對象：

writer: {type: 'json',transform: function(data, request) {// do any data transformations here// ...// return the data object that should be sent to serverreturn data;} }

使用transform，可以在發送請求之前做任何所需的數據處理（例如，移除id屬性）。這三個選項，為發送到服務器的數據內容提供了最大的控制。不過，這會增加數據錯誤的風險，因而，使用需謹慎。

示例：使用transform：https://fiddle.sencha.com/#fiddle/p05

有關Ext JS 5中數據模型的改變和改進的更多信息，請參閱Ext JS升級指南。

轉載于:https://www.cnblogs.com/hainange/p/6334112.html

總結

以上是生活随笔為你收集整理的【翻译】Ext JS最新技巧——2015-8-11的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。