Sencha Touch 2 快速入门系列（三）-- 组件之表格(Forms)

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

转载请注明出处：http://blog.youkuaiyun.com/ardy_c/article/details/7497330

在应用中，很多时候需要和用户进行一些交互。表单（Forms）这个东西给我们提供了一个很好的接口。相信大家对传统的HTML表单已经非常熟悉。而Sencha Touch 2中的表单和传统的HTML表单没有太大区别。也正因为Sencha Touch 2是基于HTML5建立的，它的表单是对HTML5的表单功能进行了封装，提供了一些可选择的验证和数据提交方式，并提供了一套漂亮的外观。这一节，就给大家介绍一下表单的使用方法。

建立一个表单(Forms)

建立一个表单很简单，我们先上代码：

var formPanel = Ext.create('Ext.form.Panel', {
    fullscreen: true,

    items: [{
        xtype: 'fieldset',
        items: [
            {
                xtype: 'textfield',
                name : 'name',
                label: 'Name'
            },
            {
                xtype: 'emailfield',
                name : 'email',
                label: 'Email'
            },
            {
                xtype: 'passwordfield',
                name : 'password',
                label: 'Password'
            }
        ]
    }]
});

表单对应的类是Ext.form.Panel，该类直接继承于Ext.Panel。建立一个该类的实例，该实例相当于容器的存在，然后在其内部添加各种用于输入信息的组件（就是写html时，在form标签里面添加各种input标签、textarea标签等等）。

上面的代码中，作为formPanel子元素的是一个名为fieldset的组件。它的作用在于把各个用于输入的组件包装起来，使它们更加整齐美观。你甚至可以为它设置title属性，它自动在表单的顶部添加该title属性的值作为表单的标题，让用户更直接地认识到这个表单的用途。而在fieldset组件里，我们加了三个用于输入的组件--textfield、emailfield和passwordfield。其中email是HTML5新加入的input标签里type为email的输入类型，另外两个相信不用我在这里详说，你也会懂的。这样就建立一个最简单的表单，你可以执行下面完整代码，预览这段代码所生成的效果。完整代码如下：

Ext.application({
    name: 'sample',

    launch: function() {
        var formPanel = Ext.create('Ext.form.Panel', {
            fullscreen: true,
        
            items: [{
                xtype: 'fieldset',
                title: 'My first form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name : 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password'
                    }
                ]
            }]
        });

        Ext.Viewport.add(formPanel);
    }
});

完善表单

就这样，我们成功建立了一个表单。是不是很简单？就是这么简单！当然，这还不是一个完整的表单。下面，我们一起来完善一下这张表单。

Ext.application({
    name: 'sample',

    launch: function() {
        var formPanel = Ext.create('Ext.form.Panel', {
            fullscreen: true,
        
            items: [{
                xtype: 'fieldset',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name : 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password'
                    }
                ]
            }]
        });
        
        formPanel.add({
            xtype: 'toolbar',
            docked: 'bottom',
            layout: { pack: 'center' },
            items: [
                {
                    xtype: 'button',
                    text: 'Set Data',
                    handler: function() {
                        formPanel.setValues({
                            name: 'Ed',
                            email: 'ed@sencha.com',
                            password: 'secret'
                        })
                    }
                },
                {
                    xtype: 'button',
                    text: 'Get Data',
                    handler: function() {
                        Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
                    }
                },
                {
                    xtype: 'button',
                    text: 'Clear Data',
                    handler: function() {
                        formPanel.reset();
                    }
                },
                {
                    xtype: 'button',
                    text: 'Submit',
                    handler: function() {
                        formPanel.submit({
                            url: 'testSubmit.php',
                            method: 'POST',
                            success: function() {
                                alert('form submitted successfully!');
                            }
                        });
                    }
                }
            ]
        });
    }
});

上面的代码是在原来的例子的基础上建立的，通过formPanel.add方法追加了一个子组件，类型是toolbar。顾名思义，添加toolbar就是为这个formpanel增加一个工具条。其中docked属性，是指固定停靠在哪里（顶部top, 底部bottom, 左边left, 右边right 四个选项）。上面选择停靠在bottom，就是底部。这里的layout属性被传入的是一个数据对象，里面设置的pack是指容器内部子元素的对齐方式（左对齐start，居中center，右对齐end）。在追加的toolbar里面，我们添加了四个按钮组件作为toolbar的子元素。

第一个按钮，设置text属性为Set Data，该属性是用于设置按钮上显示的文本内容。handler属性，是用于设置响应按钮点击事件的处理方法。这里的处理方法就是为表单填入一些固定的信息。其中，formPanel.setValue方法是用于设置表单内各项的值，传入参数是一个数据对象，数据对象内每一个属性名称必须和form内的每项的name属性对应，否则设值失败。

第二个按钮，响应点击事件的处理方法是用alert的方式显示表单内各项的值。Ext.Msg.alert 是一个静态方法，作用是弹出一个消息框，第一个参数是这个框的标题文本，第二个参数是需要显示的消息体。formPanel.getValues方法，是获取formPanel内部全部项的值。

第三个按钮，很简单、直接，重置表单，和html的type=reset一样效果。

第四个按钮，用于提交表单。formPanel.submit()方法实现在提交表单的操作，我们传进去了一个数据对象，里面设置了表单要提交的地址(url)，提交方式(method)，响应提交成功后的处理方法(success)。有一点需要注意的是，提交后响应页面需要返回 {"success":true} 的json，才会被认为是提交成功。

一张完整的表单出来了，大家尝试一下，看看是怎样的效果。当然，你需要自己准备一个处理提交的响应页面喔。