Sencha Touch 2.0官方指南:如何使用組件
什么是組件
我們在Sencha Touch 2.0中接觸的很多類都是組件。每個組件都是Ext.Component,的子類。這就意味著他們可以：
◆使用一個模板把自己渲染到頁面上
◆在任何時候顯示/隱藏自己
◆把自己顯示在屏幕中間
◆確定自己是否可用
他們還可以做一些更高級的事：
◆把自己置于其他組件之上(windows, message boxes and overlays)
◆動態的改變自己的大小和位置
◆把其他組件置于自己的內部
◆和其他組件排列在一起，可以拖動他們，滾動他們的內容等等
什么是容器
應用程序是由很多組件組成的，他們被一個個的組件包含著。容器也像組件，但除了組件的功能以外他還可以渲染和插入新的組件。大部分App 都有唯一的一個最上層容器叫做”Viewport”,他占滿了整個屏幕，子組件被包含在他們里面。例如一個mailApp他的 Viewport 內容里面包含郵件列表和郵件預覽面板。
容器有下面幾個功能：
◆在初始化和運行的時候添加新的組件
◆移除組件
◆指定組件布局
布局確定了組件在屏幕上的顯示方式。就如我們剛才提到的emailapp，我們使用了HBox布局，這個布局使得emaillist 在屏幕的左邊出現，emailpreview 在屏幕的剩下部分出現。ST 2 提供了幾張布局方式，可以方便開發者完成組件布局。
初始化組件
組件的初始化和ST 中其他類的初始化一樣。使用Ext.creat 方法。下面的例子展示了如何添加一個Panel組件。
- var panel= Ext.create('Ext.Panel', {
- html: 'This is my panel'
- });
在這個例子中我們添加了一個Panel，并對他進行了基本的HTML內容設置。Panle 是一個簡單的組件，他能渲染HTML，包含其他組件。我們增加了一個Panel，但他不會馬上在屏幕上顯示，因為組件不會在初始化時馬上顯示出來。這樣使得我們可以在增加和布置好所需的組件后一起把他們渲染和顯示出來。這種方法比渲染之后在移動組件的位置更快。
顯示這個Panel我們可以使用全局Viewport
- Ext.Viewport.add(panel);
Panel同樣也是容器，可以為他添加子組件。下面的例子展示了一個Panel中使用hbox布局兩個子組件
- var panel= Ext.create('Ext.Panel', {
- layout: 'hbox',
- items: [
- {
- xtype: 'panel',
- flex: 1,
- html: 'Left Panel, 1/3rd of totalsize',
- style: 'background-color: #5E99CC;'
- },
- {
- xtype: 'panel',
- flex: 2,
- html: 'Right Panel, 2/3rds of totalsize',
- style: 'background-color: #759E60;'
- }
- ]
- });
- Ext.Viewport.add(panel);
在上面的代碼中，我們增加了3個Panel，***個在其他兩個之前生產。在里面的兩個組件使用了xtype進行布局。Xtype是一種很方便的布局方式，可以在不用Ext.creat方法的情況下就可以產生組件。
我們指定了頂層Panel的布局方式-hbox，他根據‘flex’對父Panel進行垂直分割。例如，父Panel的寬度是300px，***個Panel是100px 寬，另一個是200px。
配置組件
你可以通過configuration 選項對任意一個組件進行配置。所有的configuration 都在組件類的“Config Options”中。你可以在組件初始化時傳入任意個配置選項，也可以在組件初始化之后對他的配置進行修改
- //we can configure the HTMlwhen we instantiate the Component
- var panel= Ext.create('Ext.Panel', {
- fullscreen: true,
- html: 'This is a Panel'
- });
- //we can update the HTMllater using the setHtmlmethod:
- panel.setHtml('Some new HTML');
- //we can retrieve the current HTMlusing the getHtmlmethod:
- alert(panel.getHtml()); //alerts "Some new HTML"
任何一個配置都有getter和Setter方法。他們是自動生成的。例如一個配置選項叫做“html”那么他將會有一個getHtml和setHtml方法一個默認的配置擁有一個getDefault 和serDefault方法。
在容器中添加組件
正如我們所說的，容器是特殊的組件，他可以添加新的子組件。上面的例子向我們展示了如何添加2個子Panel到一個父Panel中。但是在運行的時候我們也可以方便的做到。
- //this is the Panelwe'llbe adding below
- var aboutPanel= Ext.create('Ext.Panel', {
- html: 'About this app'
- });
- //this is the Panelwe'llbe adding to
- var mainPanel= Ext.create('Ext.Panel', {
- fullscreen: true,
- layout: 'hbox',
- defaults: {
- flex: 1
- },
- items: {
- html: 'First Panel',
- style: 'background-color: #5E99CC;'
- }
- });
- //now we add the first panelinside the second
- mainPanel.add(aboutPanel);
在這個例子中，我們增加了3個Panel。***個是aboutPanel，他用做告訴用戶這是一個什么App。然后我們增加了一個叫mainPanel的Panel，在這個Panel中已經通過item配置包含了第三個Panel。***我們把***個Panel添加到mainPanel中。
在這個例子中我們指定通過hbox方式對mainPanel進行布局，當然還有很多其他布局方式。我們使用Flex：1對其中的子組件進行布局。通過這種方式使得當mainPanel中只有一個組件的時候這個子組件將占滿整個屏幕。當有2個子組件的時候每個子組件各種一半屏幕。
同樣，我們也可以方便的從容器中移除組件
- mainPanel.remove(aboutPanel);
顯示和隱藏組件
每一個組件都可以使用簡單的方法進行顯示和隱藏操作。我們還是以mainPanel為例，隱藏mainPanel
- mainPanel.hide();
顯示mainPanel
- mainPanel.show();
事件
所有的組件都有觸發事件，他們可以監聽事件并采取行動。例如：當Textfeld有輸入的時候，他的’change’事件被觸發，你可以通過’listeners’配置對他進行監聽。
- Ext.create('Ext.form.Text', {
- label: 'Name',
- listeners: {
- change: function(field, newValue, oldValue) {
- myStore.filter('name', newValue);
- }
- }
- });
當TextField的值改變的時候，’change’事件被觸發，他所對應的函數被執行。
很多事件都是被ST組件觸發的，允許我們hook大部分的應用行為。你還可以在組件增加之后重新指定。
例如：有一個dashboard他用來接收實時更新，我們規定在dashboard顯示的時候他才更新，不然不更新。
- dashboard.on({
- hide: MyApp.stopPolling,
- show: MyApp.startPolling
- });
每一個組件的事件都在他的類定義文件中有描述。
Docking
ST允許組件停留在其他容器上面。例如：我們已經有兩個子組件了，他們通過hbox布局，這時要把一個頭部放在兩個子組件的上面。Docking可以讓我們方便的完成。
清除組件
因為大部分移動設備的內存都有限，所以很有必要在確認一個組件不會再被使用后清除掉。清除組件不是最重要的事，但這個確實很有意義，他可以提高用戶的體驗。清除組件非常的容易：
- mainPanel.destroy();
