[ ExtJS2.0 開發指南 ] CH3 : ExtJS 的基本功能 - 進度條組件介紹

前言 : 
在前面的章節我們有稍微提到進度條的使用, 在項目開發中有很多地方會用到它. 接下來我們將更詳細的來了解進度條看看它還能做些什麼. 

認識 Ext.ProgressBar : 
Ext.ProgressBar 繼承自 Ext.BoxComponent, 該進度條具有兩種不同的模式 : 手動更新與自動更新模式. 在手動更新模式中, 程式員必須自己控制進度條的顯示, 更新與清除. 在自動模式只需要調用 wait() 方法, 進度條就會自己無限制的滾動下去. 在下表中給出所有組件都有的公共屬性和方法, 這些屬性在下面的範例代碼中將會頻繁出現 : 
 

接著我們直接來看看使用 applyTo() 範例代碼 : 

你可以透過上面代碼試驗 applyTo 用於不同 HTML 元素可能產生不同的效果, 將 applyTo 的目標元素依須替換成 div, table, tr, td 可以看到當目標元素為 div 和 table 時程序可以正常執行, 說明 div 與 table 之後可以直接追加元素, 當目標為 tr , td 時程序報錯而無法繼續運行, 說明 tr, td 之後無法直接追加元素. 
如果使用 renderTo 的情況, 會發現當目標元素為 div 與 td 時程序可以正常執行, 當目標為 table 或 tr 時程序會報錯而無法正常執行. 
注意. 

如果在組件配置項目中同時出現 applyTo 與 renderTo 兩個項目, 則 applyTo 優先於 renderTo.

手動模式的進度條 : 
手動更新進度條主要是透過調用進度條的 updateProgress() 方法實現的. 現在來詳細看一下進度條的 updateProgress() 方法是如何使用的. 
調用格式 : 

updateProgress( [Float value], [String text] )

參數說明 : 

value : 0~1 之間的數字, 默認為 0, 如果 value 超過 1, 進度條也不會重新開始.
text : 進度條上顯示的文字, 如果忽略該參數則進度條將保持現有文字不變.

返回值 : 

Ext.ProgressBar

範例代碼 : 

執行結果 : 
 

手工更新的進度條非常適合可以掌握程序執行狀態的長時間操作, 例如文件的上傳進度. 但是有些情況無法準確的掌握程序的實時狀態, 只能得到一個最終的完成狀態, 在這個情況手工更新的進度條就不太適用了. 

自動模式的進度條 : 
自動模式的進度條通常用於不能準確地反應程序的執行狀態, 而是給用戶一個友好的體驗, 表示正在執行一個耗時的操作, 減輕用戶的等待感. 創建一個自動模式的進度條並不複雜, 只要調用進度條的 wait() 方法, 進行必要的配置就可以得到一個理想狀態的自動更新進度條. 
調用格式 : 

wait([Object config])

參數說明 : 

config : 自動更新進度條的配置對像, 提供非常有用的配置項供我們使用. 下表是有關配置項說明

返回值 : 

Ext.ProgressBar

範例代碼 : 

執行結果 : 
 

自定義的進度條樣式 : 
在表 3-4 提到過 cls 配置項, 它的作用是把用戶自定義的樣式表應用於組件元素, 這裡改變進度條樣式就是透過設置其 cls 項來實現的. 首先需要準備一個自己喜歡的自訂義樣式表, 然後把樣式的名字賦值給 cls 項. 參考下面範例 : 

執行結果 :