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

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

转载请注明出处：http://blog.youkuaiyun.com/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);
    }
});<