學習完提示框與進度條, 對 ExtJS 組件的配置及使用就有一定的認識, 接下來會學到更豐富的工具欄阻件 (Toolbar) 和菜單欄 (Menu). 這兩個組件並不陌生, 在標準桌面應用程序都會提供, 它們經常給用戶提供一種快速執行操作的便捷方式方便用戶使用.
認識 Ext.Toolbar :
Ext.Toolbar 是工具欄的基礎組件, 它相當於容器, 在其中可以放置各種工具欄元素, 其中主要包括按鈕, 文字與菜單組件. 在開始編寫範例前先來了解一下 Ext.Toolbar 組件的主要配置項與常用方法, 如下表所示 :
表 3-7 中列出了 Ext.Toolbar 支持的各種工具欄常見的方法, 熟悉這些方法可以創建功能非常強大的工具欄 :
只包含按鈕的簡單工具欄 :
典型的工作欄是由一組實現不同功能的按鈕組成, 作為一個範例將創建一個類似文本編輯中的工具欄, 它將包含新建, 打開和保存 3 個按鈕, 在範例中將使用上表 3-7 介紹的 addButton() 方法, 下面是關於 addButton() 方法的說明.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
包含多種元素的複雜工具欄 :
為了展示多種元素加入工具欄之後的顯示效果, 在下個例子中創建的工具欄也許並不美觀實用, 但它能夠很好的說明不同元素在工具欄上顯示效果. 1. 調用不同方法加入不同元素 在上一個例子使用 addButton() 方法向工具欄添加按鈕元素, 除此方法外還有許多其他方法可以像工具欄添加元素. 例如 addFill() 方法可以向工具欄添加一個充滿工具欄的空白元素, addText() 可以向工具欄添加一個簡單字符串等. 在下面代碼說明上述方法使用 :
底下為執行結果 :
2. 調用一次加入多個不同元素 第一個方法雖然達到添加不同元素到工具欄的目的, 但是需要調用多個不同方法較為繁瑣. 其實 ExtJS 提供更簡潔的調用方法 add(). 它可以將多個不同元素一次性的添加到工具欄中. 下面是該方法的使用範例.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
認識 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 組件. 透過下面範例可以知道如何包裝其他組件與實現一些特殊效果 :
執行結果 :
具有選擇框的菜單 :
最後再來看一個具有選擇框的菜單範例, 在這個範例中包括了複選框與單選框兩種. 範例代碼如下 :
執行結果如下 :
沒有留言:
張貼留言