Sencha Touch学习笔记（二）组件

上一篇了解到Sencha Touch的类之后，现在让我们来了解一下Sencha Touch强大的组件吧。
注：本文大部分案例来自于官网API。

组件（Components）

大部分你能与之互动的可视化的类都属于组件，Sencha Touch中所有的组件都继承自Ext.Component。他们都有如下特性：
1. 使用template把自己加载到页面上；
2. 可以在任何情况下显示或者隐藏；
3. 可以定位到屏幕中心；
4. 可以启用或者禁用。

还有获取事件：
1. 浮Float 到其它组件上（窗口，消息框，覆盖overlays）；
2. 改变大小和位置；
3. dock(用于toolbar)
4. 对齐Align， dragged拖拽， scrollable滚动 等等。

容器（Container）

如panel等容器还有以下几种功能：
1. 在实例化或者运行时添加子组件；
2. 移除子组件；
3. 设定布局layout。

有关于Layout会在以后进行详细的描述。

实例化组件

实例化组件的方法和类相同，如下：

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

上面我们实例化了一个简单的panel，但是它不会立刻显示到屏幕上，可以通过以下的方式：

Ext.Viewport.add(panel);

将panel加载到全局视图。

上面我们提到了Panel也是个容器，下面的例子里，panel包含了两个组件并且采用了hbox的布局：

Ext.application({
    name : 'Sencha',

    launch : function() {       
        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);
    }
});

有如下显示：

其中的两个子组件也是Ext.Panel，但采用了xtype的方式定义，更简洁一些，创建一个容器，包含子组件时，这是特别有用的,说的直白一点，xtype是组件的小名。有关Sencha Touch组件的xtype可以查询API 的头部位置：

这里简单说一下hbox的布局，子组件把父组件的宽度分了3份，一个占了1份，一个占了2份。

配置组件

组件提供了很多的配置项，可以在API中查询：

Ext.application({
    name : 'Sencha',

    launch : function() {       
        //we can configure the HTML when we instantiate the Component
        var panel = Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'This is a Panel'
        });

        //we can update the HTML later using the setHtml method:
        panel.setHtml('Some new HTML');

        //we can retrieve the current HTML using the getHtml method:
        Ext.Msg.alert(panel.getHtml()); //alerts "Some new HTML"
    }
});

这里的fullscreen是指当加载到Ext.Viewport时，100%的宽度和高度可用。
组件的配置同类一样都提供了getter和setter方法。

其他方法

当一个容器已经定义好了之后，还想动态的给它添加一个组件怎么办呢？很简单，调用对象的add()方法.
比如：mainPanel.add(aboutPanel);
移除就调用remove()
比如：mainPanel.remove(aboutPanel);

最开始我们提到了可以让组件显示或者隐藏，使用的方法如下：

mainPanel.hide();
mainPanel.show();

事件Events

所有组件的事件可以通过 listeners 配置项进行监听和操作,下面我们实例化一个文本框，给他的change事件加了一个监听，当监听到change时执行一个操作：

Ext.create('Ext.form.Text', {
    label: 'Name',
    listeners: {
        change: function(field, newValue, oldValue) {
            myStore.filter('name', newValue);
        }
    }
});

销毁组件

因为手机的内存有限，当开发实际的项目时可能需要对组件进行销毁，我们可以调用如下方法：mainPanel.destroy();

有关于组件的部分已经介绍完了。