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

標籤：命名   選擇   fill   bottom   jsb   中文   gets   初始化   name   

本文地址：http://blog.csdn.net/sushengmiyan/article/details/38515499

本文sushengmiyan

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

Ext JS API：  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

    中文4.1翻譯線上地址：http://extjs-doc-cn.github.io/ext4api/

     中文4.1下載到本地：https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip

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

瞭解了組件的原理之後。我們就能夠將它們詳細的應用到我們的項目中去了，如今我們將一個工具條加入到我們的應用程式中去。

準備工作

  1.安裝了sencha cmd並能夠正確使用  點此學習

  2.瞭解了組件添加表徵圖的操作及原理   點此學習

  3.瞭解了Ext JS的組件及其模板方法    點此學習

本節目標

  使用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）是button， 可是工具列的元素（工具列容器中的子項）能夠是不論什麼類型的組件，通過xtype制定類型。工具列顯示從TreeStore作為一個導航button的蹤跡的分層資料，每一個button代表一個節點。

點擊一個button將樹中的“選擇”節點。

非分葉節點將顯示他們的孩子節點，下拉式功能表將顯示瀏覽路徑記錄相應的button,並點擊一個條目的菜單將觸發選擇相應的子節點。

選擇能夠使用setSelection以編程方式設定,或者使用getSelection檢索是否被選中。工具列元素能夠通過它們的建構函式明白地被建立，或者通過它們的xtype類型來建立，並且能夠動態地add加入。

  當中Toolbar類有幾個經常使用的屬效能夠設定：

xtype詳細類型能夠為 button(預設的button)、tbtext(直接渲染一個文本)、splitbutton(切割button)，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。學習進度比較慢，大家有好的學習方法的，多多貢獻分享給小弟~感激不盡。

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