Sencha Touch 2 快速入门系列（二）-- 组件(Components)

本文已添加至Sencha Touch 2快速入门系列索引：http://blog.csdn.net/ardy_c/article/details/7544470

转载请注明出处：http://blog.csdn.net/ardy_c/article/details/7449072

组件(Components)，是我们介绍的第一个概念。当你需要用Sencha Touch 建立一些可视化元素的时候，与你经常打交道的就是它。Sencha Touch里面的每一个组件都是继承于 Ext.Component这个类。官方给出了它的几个特性：

• 使用模板将它们自己渲染到页面上
• 可以在任何时候显示/隐藏自己
• 在屏幕上将自己居中显示
• 能令自己变成可用/不可用

几个高级的特性：

• 飘浮于其它组件之上（窗口、消息框、遮罩层）
• 以动画形式重新定义大小和位置
• 停靠在其它组件内部的固定位（最常用的是工具栏）
• 与其它组件进行排列，允许用户对其进行拖拽，让它们自己的内容在组件内部进行滚动  

容器(Container)，是本文介绍的另一个既念。容器与组件十分相似，因为Ext.Container是继承于Ext.Component。不同的是在概念中容器用于装载组件，允许在其内部嵌套若干个组件。就像我们平时做页面设计的时候，当有很多元素的时候，我们会用一个div或者其他标签将其子元素包裹起来，作为一个装载这些子元素的容器。这里所说到的的容器，也是同一概念。所以，是容器，还是组件，就要看其用途加以区分。而Sencha Touch 2里，大部分应用都会有一个顶层容器，称之为Viewport，用于承载当前屏幕显示出来的全部内容。对于每个容器，我们都可以为其指定一个布局（Layout）的方式。这个布局的方式，决定了容器内的组件将以什么样的方式在屏幕上排列显示出来。Sencha Touch 2已定义好了几种布局的方式，稍后的文章中，我会对Layout 布局进行详细介绍。现在来看看官方给出了容器的几个特别的功能：

• 可以在初始化或者运行的时候，为容器添加子组件
• 可删除组件
• 可以为容器指定一个布局方式

建立一个组件

var panel = Ext.create('Ext.Panel', {
    html: 'This is my panel'
});

万事起头难，开始我们就来点简单点的吧。上面用Ext.create的方法创建了一个简单的组件--Ext.Panel的实例，并通过变量panel来引用。在其中，我们只添加了很简单的html元素（html: 'This is my panel'）。Ext.create是Sencha Touch 2新引入的，用于创建实例的方法。其中，第一个参数是需要创建实例的类，就是说你想使用哪个类创建一个实例，这里用Ext.Panel；第二个参数，是一个数据对象，用于初始化实例。虽然已经用Ext.create方法创建了一个组件的实例，但该实例并不马上显示到屏幕上去。就像jQuery一样，你用$("<div></div>")生成了一个元素，你需要将它append到页面上的一个容器里，它才会显示出来（如果你对jQuery不了解，可以忽略此句）。这里原理也一样，你需要将该组件添加到容器里面去。看看以下代码：

Ext.Viewport.add(panel);

通过调用Ext.Viewport.add的方法，我们就可以将这个组件添加到顶层容器中去了。那么，当我们启动app的时候就可以在屏幕看见panel及其html元素。全部代码如下：

Ext.application({
    name: 'sample',

    launch: function() {
        var panel = Ext.create('Ext.Panel', {
            html: 'This is my panel'
        });
        
        Ext.Viewport.add(panel);
    }
});

Ext.Panel是继承于Ext.Container，在这里它既是组件，也可以是个容器。那么，我们尝试在它的内部添加一些组件，并为其设置一个布局方式。

var panel = Ext.create('Ext.Panel', {
    layout: 'hbox',

    items: [
        {
            xtype: 'panel',
            flex: 1,
            html: 'Left Panel, 1/3rd of total size',
            style: 'background-color: #5E99CC;'
        },
        {
            xtype: 'panel',
            flex: 2,
            html: 'Right Panel, 2/3rds of total size',
            style: 'background-color: #759E60;'
        }
    ]
});

Ext.Viewport.add(panel);

这次，panel不再作为一个组件的角色，而是要成为一个容器。我们不再为panel的html属性设置值了，取而代之的是layout和items两个属性。layout是用于设置布局方式。这里选用了hbox，是水平布局方式（Horizontal Box），其子元素以水平方式排列。items是一个对象数组，用于设置其子元素，我们为其添加了两个Panel组件。从哪里看出是Panel组件？ xtype: 'panel'，就是这个，后面我们再谈谈xtype。flex属性，在水平布局中，用于设置容器的宽度。这个例子里panel只有两个组件，两个组件的flex属性加起来是3，就是让水平总宽度平均分成3份，第一个组件的flex属性为1，它的宽度就是占1/3，第二个组件的flex属性为2，宽度就是2/3。style属性，是为组件设置css样式，这里设置了组件的背景颜色。急不及待的孩童们可以跑一下代码看看效果如何。

关于xtype

在Sencha Touch里提供了一种建立Component的快捷快式，我们仅需要一个数据对象，并在对象里设置xtype的属性，Sencha Touch即可给我们返回相应的组件，而不需要我们使用Ext.create方法和输入完整的类名。这种方式是一个简短的写法，特别适合在一个容器里需要建立子组件的时候使用，就像上面的例子，在items里用写xtype的方式，就可以为panel建立两个子组件。xtype的值是一个字符串，每一个组件的类都在Sencha Touch内部注册了一个与自己对应的xtype名称，我们就是用这些名称来设置xtype的值。以下是各组件类对应的xtype名称：

xtype                         Class
-----------------           ---------------------
actionsheet             Ext.ActionSheet
audio                        Ext.Audio
button                       Ext.Button
component              Ext.Component
container                 Ext.Container
image                       Ext.Img
label                         Ext.Label
loadmask                Ext.LoadMask
map                          Ext.Map
mask                        Ext.Mask
media                       Ext.Media
panel                        Ext.Panel
segmentedbutton   Ext.SegmentedButton
sheet                        Ext.Sheet
spacer                      Ext.Spacer
title                            Ext.Title
titlebar                      Ext.TitleBar
toolbar                     Ext.Toolbar
video                        Ext.Video
carousel                  Ext.carousel.Carousel
carouselindicator   Ext.carousel.Indicator
navigationview        Ext.navigation.View
datepicker               Ext.picker.Date
picker                       Ext.picker.Picker
pickerslot                Ext.picker.Slot
slider                        Ext.slider.Slider
thumb                       Ext.slider.Thumb
tabbar                      Ext.tab.Bar
tabpanel                 Ext.tab.Panel
tab                            Ext.tab.Tab
viewport                  Ext.viewport.Default

DataView Components
---------------------------------------------
dataview                Ext.dataview.DataView
list                           Ext.dataview.List
listitemheader          Ext.dataview.ListItemHeader
nestedlist              Ext.dataview.NestedList
dataitem                Ext.dataview.component.DataItem

Form Components
---------------------------------------------
checkboxfield           Ext.field.Checkbox
datepickerfield         Ext.field.DatePicker
emailfield                  Ext.field.Email
field                            Ext.field.Field
hiddenfield               Ext.field.Hidden
input                          Ext.field.Input
numberfield             Ext.field.Number
passwordfield         Ext.field.Password
radiofield                  Ext.field.Radio
searchfield               Ext.field.Search
selectfield                 Ext.field.Select
sliderfield                 Ext.field.Slider
spinnerfield              Ext.field.Spinner
textfield                     Ext.field.Text
textareafield             Ext.field.TextArea
textareainput           Ext.field.TextAreaInput
togglefield               Ext.field.Toggle
urlfield                      Ext.field.Url
fieldset                     Ext.form.FieldSet
formpanel               Ext.form.Panel

其它的配置方式

Sencha Touch 2里，Component里每一个属性，对可以通过setter和getter的方式来设置值或者取值。请看以下代码：

//我们先用开始的方式建立一个panel
var panel = Ext.create('Ext.Panel', {
    fullscreen: true,
    html: 'This is a Panel'
});

//我们再用setter的方式，重新设置html属性的值
panel.setHtml('Some new HTML');

//当然，我们也可以通过getter的方式获得html属性的值
alert(panel.getHtml());   //alerts "Some new HTML"

这种方式是不是更灵活？对于容器内组件的添加/删除，Sencha Touch也提供了另一种灵活的方式：

//实例化一个组件
var aboutPanel = Ext.create('Ext.Panel', {
    html: 'About this app'
});

//建立一个容器
var mainPanel = Ext.create('Ext.Panel', {
    fullscreen: true,

    layout: 'hbox',
    defaults: {
        flex: 1
    },

    items: {
        html: 'First Panel',
        style: 'background-color: #5E99CC;'
    }
});

//可以通过add方法，将组件加入到容器中去
mainPanel.add(aboutPanel);


//当然，也可以将容器内的组件删除
//mainPanel.remove(aboutPanel);


//还可以隐藏整个容器
//mainPanel.hide();


//然后再次显示出来
//mainPanel.show();


//甚至可以销废容器
//mainPanel.destroy();

这种方式，相对于Sencha Touch的语法来说，我们可能会更加熟悉。并且，也有利于我们在初始化整个页面后，操作过程中再次使用js对整个布局进行调整或者实现其它功能。

现在对组件(Component)有了一定的认识了吧？想认识得更好，请继续留意本系列教程的连载。