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();