[ ExtJS2.0 開發指南 ] CH4 : 常用表單 - 表單及表單元素 (3)

Ext.form.ComboBox 組合框 :
Ext.form.ComboBox (組合框) 擴展自 Ext.form.TriggerField 組件, 它支持自動完成, 遠程加載數據, 分頁等特性, 是在開發中使用頻繁的組件, 在所有表單中它的配置也是相對複雜. 在下表列出主要配置項, 因為功能複雜在一個範例不足以描述, 故接下來會分幾個範例進行說明 :




- 本地數據源的組合框
在這個範例中會創建一個本地模式的組合框, 這個範例是一個允許選擇郵政編碼的組合框, 該組框有特點 :

* 允許用戶輸入但是要求輸入值必須是列表中已存在的項目.
* 在用戶輸入過程中會自動匹配剩餘的文本.
* 用戶可以自由改變下拉列表的大小.

這三點分別透過設置 forceSelection, typeAhead 和 resizeable 得以實現. 請參考範例代碼如下 : 

執行結果 :


- 遠程數據源的組合框
這個範例將創建一個讀取遠端數據的組合框, 它通過向服務器發送查詢字符串來得到一份相關書籍的列表, 並具有以下三個特點 :

* 在組合框中輸入 3 個字母後開始搜尋書籍, 當輸入不滿3個字元不進行查詢.
* 單擊觸發按鈕將會查詢全部書籍列表, 不進行篩選.
* 指定服務器讀取查詢條件時使用的查詢名稱. 並指定組合框在加載數據時的提示訊息.

範例代碼如下 : 

執行結果 :

在上面代碼使用 Ext.data.HttpProxy 來讀取遠端數據, 最後在組合框的下拉列表中顯示出來.

- 帶分頁功能的組合框
在上述兩個範例中對於顯示數據較少的使用情況下是完美的, 但是在數據量非常大的情況下, 如 200 條數據同時顯示在一個列表中, 這對於用戶的查找和使用都是不方便的. 為此在這裡接下來的範例中創建一個具有分頁功能的組合框, 用來顯示較大的數量的訊息 : 

執行結果 :

這裡使用 Ext.data.JsonStore 數據源組件, 它是用來讀取 json 格式數據的數據源, 因為在分頁過程服務器將向頁面返回包含總條樹目與當前頁明細的相關數據, 使用原先的 Ext.data.SimpleStore 是無法達到的, 所以在這情況下使用了 json 格式作為服務器和客戶端交換的標準. 另外由於使用了 json 作為數據返回格式, 所以對 json 格式也是有要求的, 下面是服務器端返回的一段 json 格式的字符串 : 

- 轉換一個 HTML 標準組件 select 為 Ext.form.ComboBox
在上面的 3 個範例中每次都是新建一個組合框, 然後透過數據源組件為其提供數據. 其實 Ext.form.ComboBox 還支持另一種創建方式, 就是將一個現有的 HTML 標準組件 select 轉換成 Ext.form.ComboBox 組件. 這種方式對於改造一個已有項目中的下拉列表非常有用, 不但可以美化頁面也可以得到 Ext.form.ComboBox 組件才有的功能 : 

這裡有幾點要注意, 否則會出現非預期結果 :

* 必須設置 lazyRender 配置項為 true, 否則會出現如下圖怪異效果 :

* 注意 div  id='form' 與 ID="levelName" 在頁面出現的相對位置, 如果將兩個位置對調則在單擊組件會發生錯誤!