程式扎記: [ ExtJS2.0 開發指南 ] CH3 : ExtJS 的基本功能 - 實現工具欄與菜單欄

標籤

2011年5月23日 星期一

[ ExtJS2.0 開發指南 ] CH3 : ExtJS 的基本功能 - 實現工具欄與菜單欄

前言 : 
學習完提示框與進度條, 對 ExtJS 組件的配置及使用就有一定的認識, 接下來會學到更豐富的工具欄阻件 (Toolbar) 和菜單欄 (Menu). 這兩個組件並不陌生, 在標準桌面應用程序都會提供, 它們經常給用戶提供一種快速執行操作的便捷方式方便用戶使用. 

認識 Ext.Toolbar : 
Ext.Toolbar 是工具欄的基礎組件, 它相當於容器, 在其中可以放置各種工具欄元素, 其中主要包括按鈕, 文字與菜單組件. 在開始編寫範例前先來了解一下 Ext.Toolbar 組件的主要配置項與常用方法, 如下表所示 : 
 

表 3-7 中列出了 Ext.Toolbar 支持的各種工具欄常見的方法, 熟悉這些方法可以創建功能非常強大的工具欄 : 
 

只包含按鈕的簡單工具欄 : 
典型的工作欄是由一組實現不同功能的按鈕組成, 作為一個範例將創建一個類似文本編輯中的工具欄, 它將包含新建, 打開和保存 3 個按鈕, 在範例中將使用上表 3-7 介紹的 addButton() 方法, 下面是關於 addButton() 方法的說明. 
調用格式 : 

addButtonObject/Array config )

參數說明 : 

一個符合 Ext.Toolbar.Button 配置規範的配置對像或一個包含多個配置對像的數組. 在下表 3-8 中列出了該配置對像所包含的主要配置項 :

返回值 : 

Ext.Toolbar.Button/Array

範例代碼 : 


執行結果 : 
  


包含多種元素的複雜工具欄 :  
為了展示多種元素加入工具欄之後的顯示效果, 在下個例子中創建的工具欄也許並不美觀實用, 但它能夠很好的說明不同元素在工具欄上顯示效果.  1. 調用不同方法加入不同元素  在上一個例子使用 addButton() 方法向工具欄添加按鈕元素, 除此方法外還有許多其他方法可以像工具欄添加元素. 例如 addFill() 方法可以向工具欄添加一個充滿工具欄的空白元素, addText() 可以向工具欄添加一個簡單字符串等. 在下面代碼說明上述方法使用 : 


底下為執行結果 :
  
2. 調用一次加入多個不同元素  第一個方法雖然達到添加不同元素到工具欄的目的, 但是需要調用多個不同方法較為繁瑣. 其實 ExtJS 提供更簡潔的調用方法 add(). 它可以將多個不同元素一次性的添加到工具欄中. 下面是該方法的使用範例.  
調用格式 : 
addMixed arg1, Mixed arg2, Mixed etc. )
參數說明 : 
該方法用於向工具欄添加元素, 它支持一個不定長度的參數列表, 可以一次性加入多個工具欄元素, 主要包括以下幾種 (更多請參考 API doc) . Ext.Toolbar.Button : 一個工具欄支持的 按鈕. . HtmlElement : 任何標準的 HTML 元素. . Field : 表單字段 . String : 字符串 . '->' : 一個用於充滿工具條的空白元素. . 'separator' or '-' : 工具欄分隔符
返回值 : 
Void
範例代碼 : 


執行結果 :  
  


認識 Ext.menu.Menu 菜單 :  
在菜單組件 Ext.menu.Menu 中可以配置多個菜單項. 另外菜單組件也可以作為一個基類, 在它的基礎上定義一些專用的菜單, 例如 ExtJS 提供的 Ext.menu.DateMenu 菜單.  把菜單欄與前面介紹的工具欄組件組合起來, 就可以創建非常有實用價值的用戶介面. 接下來從定義最簡單的菜單開始, 逐步建構一個功能豐富的菜單欄. 在開始編寫範例之前先來了解 Ext.menu.Menu 組件的主要配置項及常用方法, 這些內容被分佈到三個表中, 其中表 3-9 包含了 Ext.menu.Menu 組件的主要配置項, 表 3-10 包含了菜單的主要類型, 表 3-11 包含了菜單的常用方法 :  
   

最簡單菜單欄 :  
作為標寫第一個菜單欄, 它以熟悉的文本編輯軟件菜單欄作為原型, 主要分為文件菜單和編輯菜單, 在文件下拉菜單中有3個菜單項, 分別是 New, Open 和 Close. 在編輯菜單也有 3 個菜單項, 分別是 Copy, Paste 與 Cut. 底下為範例代碼 : 


執行結果 :
    


創建二級或多級菜單 :  
只要分別創建菜單和工具欄, 然後將菜單加入工具欄就實現兩者組合使用, 接下來多級菜單有以上概念與基礎, 理解與配置也是非常容易的. 範例代碼如下 : 


執行結果 :
    在上面代碼中使用了 Ext.menu.DateMenu 日期選擇類. 類似的 ExtJS 還提供 Ext.menu.ColorMenu 顏色選擇菜單, 都擴展自 Ext.menu.Menu, 是以 Ext.menu.Menu 作為基類自定義菜單的一個範例.  


使用適佩器 (Ext.menu.Adapter) :  Ext.menu.Adapter 是菜單組件的工具類, 它的作用是將非菜單組件包裝成一個菜單項, 就像在前面接觸到的 Ext.menu.ColorItem 和 Ext.menu.DateItem, 它們分別是經過包裝的Ext.ColorPalette 組件與 Ext.DatePicker 組件. 透過下面範例可以知道如何包裝其他組件與實現一些特殊效果 : 


執行結果 :
    


具有選擇框的菜單 :  
最後再來看一個具有選擇框的菜單範例, 在這個範例中包括了複選框與單選框兩種. 範例代碼如下 : 


執行結果如下 :
 

沒有留言:

張貼留言

網誌存檔

關於我自己

我的相片
Where there is a will, there is a way!