[ ExtJS2.0 開發指南 ] CH3 : ExtJS 的基本功能 - 組件配置說明

前言 :
ExtJS 為 Web 開發引入了在桌面開發中已經非常成熟的組件概念, 只需要簡單配置或根本不需要就可以使用 ExtJS 提供的豐富組件. 這些配置可以表現為兩種形式, 一種是常見的用逗號分隔的參數列表, 另一種是利用 JSON 對像作為組件提供配置訊息. 對於較簡單的配置一般採用第一種, 而較複雜的配置一般採用後面一種為組件提供配置訊息. 接下來會簡單介紹這兩種方式, 並接觸一些常見的組件來說明如何使用這兩種方式進行配置.

JSON 介紹 :
JSON 的全名是 JavaScript Object Notation. JSON 是一種結構化, 輕量級並獨立於語言, 基於文本數據的傳輸格式, 在很多場合用來替代 XML 文件. 在表達相同訊息時, JSON 比 XML 形成的文件更小更便於程式解析.
JSON 格式非常適用於那些具有一些屬性與值的簡單對像, 它以 "{" 開始, 以 "}" 結束, 屬性名與值用 ":" 分隔, 屬性間用 "," 分隔. JSON 屬性可以是簡單的字符串, 數組, 數字, 布林值, null 甚至於對像. 下面來看一個 JSON 對像的簡單例子 :

在上面範例代碼, 定義了變量 person. 它引用JSON 對像並在裡面加入有關於 john 的相關訊息. 這理只簡單對 JSON 使用做了示範, 如果要更了解 JSON 可以參考 這理.

ExtJS 組件配置方式介紹 :
有了以上知識, 接下來就可以來看看 ExtJS 對組件如何進行配置.
- 使用逗號分隔參數列表
首先來看一個簡單的逗號分隔參數列表配置組件的例子. 這個例子很簡單, 它用來顯示訊息提示框, 在後面會對訊息框做更詳細介紹, 這邊只先了解如何配置 :

在上面代碼調用了 Ext.Msg.alert 方法顯示一個訊息提示框, 該方法接受一個逗號分隔參數列表.

- 使用 JSON 對像配置組件
接下來看一個使用 JSON 對像配置組件的例子. 這裡依然關心配置方式而不是組件如何使用. 下面是一個包含配置訊息的 JSON 對像的代碼. 在這裡我們統一把這種包含組件配置訊息的 JSON 對像叫做配置對像 :

在代碼 e3-3.html 中定義了一個配置對像 config, 它包含兩個配置項, 分別是 title 和 msg, 再將 config 作為參數提供給 Ext.Msg.show(), 就成功配置了一個預期的提示框組件, 同第一種方式相比, 這種方式配置方法更顯的精簡. ExtJS 開放了大量配置項以滿足程序員在實際項目中各種不同的需求, 熟悉各種配置項與配置方式有助於我們快速掌握 ExtJS 開發的一個捷徑.
Hints.

ExtJS 提供了詳細的 API 文檔, 在 API 文檔對每個組件的配置項及配置方法都給出了明確的說明, 在實際開發過程中隨時可以查看文檔並掌握組件的使用方法.

This message was edited 5 times. Last update was at 12/05/2011 18:29:40