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: &#