[ExtJS5學習筆記]第八節 Extjs5的Ext.toolbar.Toolbar工具條元件及其應用

-------------------------------------------------------------資源連結-----------------------------------------------------------------------

API doc位址：

------------------------------------------------------------------------------------------------------------------------------------------------

了解了元件的原理之後，我們就可以将它們具體的應用到我們的項目中去了，現在我們将一個工具條添加到我們的應用程式中去。

  使用sencha cmd generate app指令生成一個簡單的應用程式之後，我們增加了圖示的支援，現在我們給這個頁面豐富一下内容，一般應用程式都會有個工具欄，現在我們給新生成的頁面增加一個工具欄。

根據Ext的命名約定，我們定義的類是oaSystem.view.main.region.Top，是以在相應的檔案夾下我們去建立這個js檔案。

其中className就是我們定義的類名，對應于我們剛才寫的，就是oaSystem.view.main.region.Top

data是一個對象，預設的我們可以用類似json這樣的鍵值對的形式來傳入，還可以傳入一個函數（暫時不研究），這裡我們代碼中的後半部分就是data對象。

createdFn是一個初始化的函數，比如initComponent()本例我們什麼都沒有傳入，因為javascript支援定義了參數可以不傳入。

  Ext.toolbar.Toolbar是一個基礎工具欄類。工具欄的預設類型（即xtype）是按鈕， 但是工具欄的元素（工具欄容器中的子項）可以是任何類型的元件，通過xtype制定類型。工具欄顯示從TreeStore作為一個導航按鈕的蹤迹的分層資料，每個按鈕代表一個節點。點選一個按鈕将樹中的“選擇”節點。非葉節點将顯示他們的孩子節點，下拉菜單将顯示浏覽路徑記錄對應的按鈕,并點選一個條目的菜單将觸發選擇相應的子節點。選擇可以使用setSelection以程式設計方式設定,或者使用getSelection檢索是否被選中。工具欄元素可以通過它們的構造函數明确地被建立，或者通過它們的xtype類型來建立，并且可以動态地add添加。

  其中Toolbar類有幾個常用的屬性可以設定：

xtype具體類型可以為 button(預設的按鈕)、tbtext(直接渲染一個文本)、splitbutton(分割按鈕)，tbfil(等同于使用->)右對齊容器，textfield（文本域）tbspace（空格，等同于‘ ’ ）

一般情況下我們定義一個text是這樣定義：

這樣的方式有個簡單的方式就是

兩個效果一樣。對于工具條的使用，可以參考API，例子相當多，而且可以使用live preview功能檢視實作效果相當友善。

在Main.js中，增加如下items值

xtype就是我們之前在Top.js中定義的alias值，代表我們引入Top.js，就是增加了一個工具條。

region就是代表設定工具條的位置，位置可以有東西南北，就是頁面的上下左右。

重新整理就可以啦，看看效果~

這是一種引用外部js檔案的方式，當然還可以直接在使用create方法來建立一個工具條。

API的文檔，有英文的最新的是5.0還有翻譯的中文的是4.1的，建議對比着看，這樣會比較快，先看有沒有差異，然後以英文為主4的漢語為輔助，學習比較迅速。以後想要使用什麼元件，都可以得心應手啦。

正在努力學習Extjs5，學習進度比較慢，大家有好的學習方法的，多多貢獻分享給小弟~感激不盡。