本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38515499](http://blog.csdn.net/sushengmiyan/article/details/38515499) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) -------------------------------------------------------------資源鏈接----------------------------------------------------------------------- Ext JS API：?[?http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar) API doc地址： ? 在線英文5.0地址 ：[http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext) ? 中文4.1翻譯在線地址：[http://extjs-doc-cn.github.io/ext4api/](http://extjs-doc-cn.github.io/ext4api/) ? ?中文4.1下載到本地：[https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip](https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip) ------------------------------------------------------------------------------------------------------------------------------------------------ 了解了組件的原理之后，我們就可以將它們具體的應用到我們的項目中去了，現在我們將一個工具條添加到我們的應用程序中去。 ### 準備工作 1.安裝了sencha cmd并可以正確使用 ?[點此學習](http://blog.csdn.net/sushengmiyan/article/details/38313537) 2.了解了組件增加圖標的操作及原理 ? [點此學習](http://blog.csdn.net/sushengmiyan/article/details/38458411) 3.了解了Ext JS的組件及其模板方法 ? ?[點此學習](http://blog.csdn.net/sushengmiyan/article/details/38487519) ### 本節目標 使用sencha cmd generate app命令生成一個簡單的應用程序之后，我們增加了圖標的支持，現在我們給這個頁面豐富一下內容，一般應用程序都會有個工具欄，現在我們給新生成的頁面增加一個工具欄。 ### 第一步：定義工具條的實現類 ~~~ Ext.define( 'oaSystem.view.main.region.Top',//ClassName 類名，需要與文件目錄對應起來，oaSystem是應用程序的名稱，這是說在view/main/region目錄下，新建立了一個Top.js文件 { extend: 'Ext.toolbar.Toolbar',//繼承自Ext的工具條，可以有工具條的屬性了，避免自己書寫麻煩 alias: 'widget.maintop',//別名，后期可以進行訪問 items: [ { // xtype: 'button', // 默認的工具欄類型 text: '首頁', glyph: 0xf015,//首頁圖標 }, { text : '幫助', glyph : 0xf059 }, { text : '關于', glyph : 0xf05a }, { xtype: 'textfield',//默認是一個button所以其他都沒寫 name: 'searchField', emptyText: '輸入您的搜索關鍵詞' }, { text : '搜索', glyph : 0xf00e }, '->',{ text : '用戶登錄', glyph : 0xf007 },{ text : '注銷', glyph : 0xf011 }, { glyph : 0xf102, handler : 'hiddenTopBottom', tooltip : '隱藏頂部和底部區域', disableMouseOver : true } ] } ); ~~~ 根據Ext的命名約定，我們定義的類是oaSystem.view.main.region.Top，所以在相應的文件夾下我們去建立這個js文件。 ### Ext. define方法介紹 Ext.define就是定義或者覆蓋一個類，它接受三個參數([String](#)?className,?[Object](#)?data,?[Function](#)?createdFn) 其中className就是我們定義的類名，對應于我們剛才寫的，就是oaSystem.view.main.region.Top data是一個對象，默認的我們可以用類似json這樣的鍵值對的形式來傳入，還可以傳入一個函數（暫時不研究），這里我們代碼中的后半部分就是data對象。 createdFn是一個初始化的函數，比如initComponent()本例我們什么都沒有傳入，因為javascript支持定義了參數可以不傳入。 ### Ext.toolbar.Toolbar類介紹 Ext.toolbar.Toolbar是一個基礎工具欄類。工具欄的默認類型（即xtype）是按鈕， 但是工具欄的元素（工具欄容器中的子項）可以是任何類型的組件，通過xtype制定類型。工具欄顯示從TreeStore作為一個導航按鈕的蹤跡的分層數據，每個按鈕代表一個節點。點擊一個按鈕將樹中的“選擇”節點。非葉節點將顯示他們的孩子節點，下拉菜單將顯示瀏覽路徑記錄對應的按鈕,并點擊一個條目的菜單將觸發選擇相應的子節點。選擇可以使用setSelection以編程方式設置,或者使用getSelection檢索是否被選中。工具欄元素可以通過它們的構造函數明確地被創建，或者通過它們的xtype類型來創建，并且可以動態地add添加。 其中Toolbar類有幾個常用的屬性可以設置： xtype具體類型可以為 button(默認的按鈕)、tbtext(直接渲染一個文本)、splitbutton(分割按鈕)，tbfil(等同于使用->)右對齊容器，textfield（文本域）tbspace（空格，等同于‘ ’ ） 一般情況下我們定義一個text是這樣定義： ~~~ { xtype: 'button', name: 'text 1', } ~~~ 這樣的方式有個簡單的方式就是 ~~~ 'text 1' ~~~ 兩個效果一樣。對于工具條的使用，可以參考API，例子相當多，而且可以使用live preview功能查看實現效果相當方便。 ### 第二步：增加工具條到頁面中 在Main.js中，增加如下items值 ~~~ { xtype: 'maintop', region: 'north', }, ~~~ xtype就是我們之前在Top.js中定義的alias值，代表我們引入Top.js，就是增加了一個工具條。 region就是代表設置工具條的位置，位置可以有東西南北，就是頁面的上下左右。 刷新就可以啦，看看效果~  這是一種引用外部js文件的方式，當然還可以直接在使用create方法來創建一個工具條。 ### 學會使用ExtJs的API API的文檔，有英文的最新的是5.0還有翻譯的中文的是4.1的，建議對比著看，這樣會比較快，先看有沒有差異，然后以英文為主4的漢語為輔助，學習比較迅速。以后想要使用什么組件，都可以得心應手啦。 正在努力學習Extjs5，學習進度比較慢，大家有好的學習方法的，多多貢獻分享給小弟~感激不盡。