Sencha Touch 2.0官方指南:如何使用組件
什么是組件
我們?cè)赟encha Touch 2.0中接觸的很多類(lèi)都是組件。每個(gè)組件都是Ext.Component,的子類(lèi)。這就意味著他們可以：
◆使用一個(gè)模板把自己渲染到頁(yè)面上
◆在任何時(shí)候顯示/隱藏自己
◆把自己顯示在屏幕中間
◆確定自己是否可用
他們還可以做一些更高級(jí)的事：
◆把自己置于其他組件之上(windows, message boxes and overlays)
◆動(dòng)態(tài)的改變自己的大小和位置
◆把其他組件置于自己的內(nèi)部
◆和其他組件排列在一起，可以拖動(dòng)他們，滾動(dòng)他們的內(nèi)容等等
什么是容器
應(yīng)用程序是由很多組件組成的，他們被一個(gè)個(gè)的組件包含著。容器也像組件，但除了組件的功能以外他還可以渲染和插入新的組件。大部分App 都有唯一的一個(gè)最上層容器叫做”Viewport”,他占滿(mǎn)了整個(gè)屏幕，子組件被包含在他們里面。例如一個(gè)mailApp他的 Viewport 內(nèi)容里面包含郵件列表和郵件預(yù)覽面板。
容器有下面幾個(gè)功能：
◆在初始化和運(yùn)行的時(shí)候添加新的組件
◆移除組件
◆指定組件布局
布局確定了組件在屏幕上的顯示方式。就如我們剛才提到的emailapp，我們使用了HBox布局，這個(gè)布局使得emaillist 在屏幕的左邊出現(xiàn)，emailpreview 在屏幕的剩下部分出現(xiàn)。ST 2 提供了幾張布局方式，可以方便開(kāi)發(fā)者完成組件布局。
初始化組件
組件的初始化和ST 中其他類(lèi)的初始化一樣。使用Ext.creat 方法。下面的例子展示了如何添加一個(gè)Panel組件。
- var panel= Ext.create('Ext.Panel', {
- html: 'This is my panel'
- });
在這個(gè)例子中我們添加了一個(gè)Panel，并對(duì)他進(jìn)行了基本的HTML內(nèi)容設(shè)置。Panle 是一個(gè)簡(jiǎn)單的組件，他能渲染HTML，包含其他組件。我們?cè)黾恿艘粋€(gè)Panel，但他不會(huì)馬上在屏幕上顯示，因?yàn)榻M件不會(huì)在初始化時(shí)馬上顯示出來(lái)。這樣使得我們可以在增加和布置好所需的組件后一起把他們渲染和顯示出來(lái)。這種方法比渲染之后在移動(dòng)組件的位置更快。
顯示這個(gè)Panel我們可以使用全局Viewport
- Ext.Viewport.add(panel);
Panel同樣也是容器，可以為他添加子組件。下面的例子展示了一個(gè)Panel中使用hbox布局兩個(gè)子組件
- 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);
在上面的代碼中，我們?cè)黾恿?個(gè)Panel，***個(gè)在其他兩個(gè)之前生產(chǎn)。在里面的兩個(gè)組件使用了xtype進(jìn)行布局。Xtype是一種很方便的布局方式，可以在不用Ext.creat方法的情況下就可以產(chǎn)生組件。
我們指定了頂層Panel的布局方式-hbox，他根據(jù)‘flex’對(duì)父Panel進(jìn)行垂直分割。例如，父Panel的寬度是300px，***個(gè)Panel是100px 寬，另一個(gè)是200px。
配置組件
你可以通過(guò)configuration 選項(xiàng)對(duì)任意一個(gè)組件進(jìn)行配置。所有的configuration 都在組件類(lèi)的“Config Options”中。你可以在組件初始化時(shí)傳入任意個(gè)配置選項(xiàng)，也可以在組件初始化之后對(duì)他的配置進(jìn)行修改
- //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"
任何一個(gè)配置都有g(shù)etter和Setter方法。他們是自動(dòng)生成的。例如一個(gè)配置選項(xiàng)叫做“html”那么他將會(huì)有一個(gè)getHtml和setHtml方法一個(gè)默認(rèn)的配置擁有一個(gè)getDefault 和serDefault方法。
在容器中添加組件
正如我們所說(shuō)的，容器是特殊的組件，他可以添加新的子組件。上面的例子向我們展示了如何添加2個(gè)子Panel到一個(gè)父Panel中。但是在運(yùn)行的時(shí)候我們也可以方便的做到。
- //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);
在這個(gè)例子中，我們?cè)黾恿?個(gè)Panel。***個(gè)是aboutPanel，他用做告訴用戶(hù)這是一個(gè)什么App。然后我們?cè)黾恿艘粋€(gè)叫mainPanel的Panel，在這個(gè)Panel中已經(jīng)通過(guò)item配置包含了第三個(gè)Panel。***我們把***個(gè)Panel添加到mainPanel中。
在這個(gè)例子中我們指定通過(guò)hbox方式對(duì)mainPanel進(jìn)行布局，當(dāng)然還有很多其他布局方式。我們使用Flex：1對(duì)其中的子組件進(jìn)行布局。通過(guò)這種方式使得當(dāng)mainPanel中只有一個(gè)組件的時(shí)候這個(gè)子組件將占滿(mǎn)整個(gè)屏幕。當(dāng)有2個(gè)子組件的時(shí)候每個(gè)子組件各種一半屏幕。
同樣，我們也可以方便的從容器中移除組件
- mainPanel.remove(aboutPanel);
顯示和隱藏組件
每一個(gè)組件都可以使用簡(jiǎn)單的方法進(jìn)行顯示和隱藏操作。我們還是以mainPanel為例，隱藏mainPanel
- mainPanel.hide();
顯示mainPanel
- mainPanel.show();
事件
所有的組件都有觸發(fā)事件，他們可以監(jiān)聽(tīng)事件并采取行動(dòng)。例如：當(dāng)Textfeld有輸入的時(shí)候，他的’change’事件被觸發(fā)，你可以通過(guò)’listeners’配置對(duì)他進(jìn)行監(jiān)聽(tīng)。
- Ext.create('Ext.form.Text', {
- label: 'Name',
- listeners: {
- change: function(field, newValue, oldValue) {
- myStore.filter('name', newValue);
- }
- }
- });
當(dāng)TextField的值改變的時(shí)候，’change’事件被觸發(fā)，他所對(duì)應(yīng)的函數(shù)被執(zhí)行。
很多事件都是被ST組件觸發(fā)的，允許我們hook大部分的應(yīng)用行為。你還可以在組件增加之后重新指定。
例如：有一個(gè)dashboard他用來(lái)接收實(shí)時(shí)更新，我們規(guī)定在dashboard顯示的時(shí)候他才更新，不然不更新。
- dashboard.on({
- hide: MyApp.stopPolling,
- show: MyApp.startPolling
- });
每一個(gè)組件的事件都在他的類(lèi)定義文件中有描述。
Docking
ST允許組件停留在其他容器上面。例如：我們已經(jīng)有兩個(gè)子組件了，他們通過(guò)hbox布局，這時(shí)要把一個(gè)頭部放在兩個(gè)子組件的上面。Docking可以讓我們方便的完成。
清除組件
因?yàn)榇蟛糠忠苿?dòng)設(shè)備的內(nèi)存都有限，所以很有必要在確認(rèn)一個(gè)組件不會(huì)再被使用后清除掉。清除組件不是最重要的事，但這個(gè)確實(shí)很有意義，他可以提高用戶(hù)的體驗(yàn)。清除組件非常的容易：
- mainPanel.destroy();
