Ext JS 4.2.x 使用 glyph 設定 ICON 圖示

Ext JS 的 Button 與 Tab 等元件，可以設定圖示，過去使用 icon 與 iconCls 屬性來設置。

在 Introducing Ext JS 4.2 文件中，建議使用新的 glyph 屬性來設定圖示。

主要的差異是過去經常使用 PNG 圖檔作為 ICON，而新的作法則改以 CSS3 @font-face 所定義的「字型」作為圖示。

目前並沒有太多關於 glyph 的文件可閱讀，只能先參考 KitchenSink 的範例，以下是 Tab 與 Button 搭配圖示之後的效果。

利用 Sencha Architect 可以看到 Button 除了 icon 與 iconCls 屬性外，也有 glyph 的屬性設定。

這組 glyph 屬性的設定值，必須是數字。而數字代表的其實就是 ASCII 字碼，例如 H 的 ASCII CODE 為 72，所以我們可以將 glyph 的值設定為 72。

{
    xtype: 'button',
    glyph: 72
}

在字型尚未設定前，實際顯示在畫面會直接秀出「H」的字母。

Glyph Icon 的意義，就是利用真正的字型來保存每個圖示，然後再利用一般文字的方式顯示。

目前 Ext JS 的佈景並未包含 Glyph Icon，但我們可以先從 KitchenSink 的範例「借」來用。

Pictos 是 KitchenSink 所使用的 Glyph Font，資料夾位於。

examples/kitchensink/resources/pictos

資料夾內包含 pictos.ttf、pictos.woff、pictos.eot 三個字型檔，除了複製到專案的資料夾下，還需要補一段 CSS3 的 @font-face 定義。

@font-face {
    font-family:'Pictos';
    src:url("../pictos/pictos.eot");src:url("../pictos/pictos.eot?#iefix") format("embedded-opentype"),url("../pictos/pictos.woff") format("woff"),url("../pictos/pictos.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

如此一來，就能在 Ext JS 使用 glyph 設置圖示。

查詢 Pictos 可用的圖示：http://pictos.cc/images/preview-font.png

使用 Glyph Icon 的優點是：

1. 網頁資源載入快速（只要下載體積很小的字型檔）
2. 能克服不同顯示解析度的圖片縮放問題

但也有缺點：

1. 瀏覽器必須支援 CSS3 的 @font-face
2. 必須取得字型的授權（本範例所提及的 Pictos 是需要付費的字型）
3. 圖示無法支援彩色設計