Sencha Touch学习笔记（九）表单

表单是在Sencha Touch中特别常用的一部分，大部分的App都会要去用户输入登录信息，这就要用表单来实现。在一些实际项目中，会有更复杂的信息需要人为的添加修改，也需要表单。
装载表单相关组件的容器有个专用的Ext.form.Panel，下面来写个简单的：

Ext.application({
    name: 'Sencha',

    launch: function() {      
        Ext.create('Ext.form.Panel', {
            fullscreen: true,

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

这里只有三个文本框，包括一个普通的textfield，一个可以自动验证邮件格式的文本框emailfield，一个不显示实际输入文本的密码框passwordfield。熟悉html文本框的，就不用多说name属性了，它是你与后台交互的时候的名字。

但是有时候我们需要将数据自动加载到表单中，而不用人为填写，这里有个简单的方法setValues：

form.setValues({
    name: 'Seth',
    email: 'seth@sencha.com',
    password: 'secret'
});

你还可以通过model的方式加载：

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name', 'email', 'password']
    }
});

var ed = Ext.create('MyApp.model.User', {
    name: 'Seth',
    email: 'seth@sencha.com',
    password: 'secret'
});

form.setRecord(ed);

这里用的是setRecord。但是有时候一些信息，比如用户资料是存在服务器的，当用户需要查看的时候要从后台读取。
还记得之前讲的数据吗，我们还可以通过proxy和store来从服务器获取数据

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name', 'email', 'password']
    }
});
Ext.create('Ext.data.Store', {
    model: 'MyApp.model.User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true,
    listeners : {
        load:function( this, records, successful, operation, eOpts ){
            var ed = records[0]; 
            form.setRecord(ed);
        }
    }
});

检索表单数据

从模板检索数据的方法通常是使用getValues：

var values = form.getValues();

最后获取到的数据是这样的：

{
    name: 'Seth',
    email: 'seth@sencha.com',
    password: 'secret'
}

当然你还可以通过监听来做些操作：

var form = Ext.create('Ext.form.Panel', {
    listeners: {
        '> field': {
            change: function(field, newValue, oldValue) {
                ed.set(field.getName(), newValue);
            }
        }
    },
    items: [
        {
                    xtype: 'textfield',
                    name : 'name',
                    label: 'Name'
                },
                {
                    xtype: 'emailfield',
                    name : 'email',
                    label: 'Email'
                },
                {
                    xtype: 'passwordfield',
                    name : 'password',
                    label: 'Password'
                }
    ]
});

这个例子很有意思，它用到了一个Sencha Touch的新功能，你可以监听一个组件的子组件的事件。用法跟css的选择器类似：>(大于号)是子代选择符。

提交表单

表单做好了，我们需要提交它

form.submit({
    url: 'url/to/submit/to',
    method: 'POST',
    success: function() {
        alert('form submitted successfully!');
    }
});

完整例子

最后，我们来一个完整的例子

Ext.application({
    name: 'Sencha',

    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: 'Seth',
                            email: 'seth@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();
                    }
                }
            ]
        });
    }
});

表单的组件还有好多种，比如下拉框，选择框，等等，这些都在Ext.field包中。还有个容器Ext.form.FieldSet，使用它可以让你的表单布局合理。
为了创建一个更丰富的页面，你可以尝试着试试这些组件。