Sencha Touch的Form使用

很多App都需要使用forms来获取用户的输入。ST的forms是封装了html5的forms,并且添加了一下验证和提交数据功能。除此之外,还更容易将field以更好的表现形式布局出来。因为forms中已经默认对field进行了布局排列。

Form Panel 提供一组form fields 和很便利的方式去加载和保存数据。使用一个form panle 包含了一组你需要展示的fields,如下面的例子:

Ext.define('Forms.view.Form',{
    extend : 'Ext.form.Panel' ,
    fullscreen : true ,
   
    config : {     
    items : [
            {
                xtype : 'textfield',
                name : 'name',
                label : 'name'
            },
            {
                xtype : 'emailfield',
                name : 'email',
                label : 'email'
            },
            {
                xtype : 'passwordfield',
                name : 'password',
                label : 'password'
            }
        ]
    }});

加载数据

使用上面的例子,我们可以有很多种方式来加载我们的数据。最容易的方式就是使用setValue方法了。

form.setValues({
    name: 'Ed',                        //对应上面的name属性
    email: 'ed@sencha.com',
    password: 'secret'
});

你也可以添加一个model实例进行form中。比如说:假设你有一个用户实体,你想将一个特定的用户实体的数据加载到form中:

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

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

form.setRecord(ed);               //this  is very important

事件监听

Form中你可以监听个别的field的变更事件,比使得你能跟及时地注意到用户的动作变化。比如上述的例子中,我们可以监听field的change事件来到达只要用户输入信息,就更新model实体的目的。如下:

var form = Ext.create('Ext.form.Panel', {
    listeners: {
        '> field': {
            change: function(field, newValue, oldValue) {
                ed.set(field.getName(), newValue);
            }
        }
    },
    items: [
        // as before
    ]
});

上面的是官方文档中事件监听。经过试验,当前是没有办法在form中通过这样的形式监听。(如果哪位朋友知道如何才是正确的,很希望你能分享一下。)

只能在form中的每个field中指定监听事件,如:

var form = Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'textfield',
            name : 'name',
            label: 'Name',
            listeners: {
            change: function(field, newValue, oldValue) {
               Ext.Msg.alert('oh name change');
              }
        },
        },
        {
            xtype: 'emailfield',
            name : 'email',
            label: 'Email'
        },
        {
            xtype: 'passwordfield',
            name : 'password',
            label: 'Password'
        }
    ]});

提交表单

ST提供了一些方式提交表单数据。在上述的例子中,我们使用到一个Model实例,所以当我们的数据有更新的时候,我们可以通过model的save方法将当前的数据变更提交到我们的服务器中,而不需要像以前一样使用表单提交的方式提交。或者你可以使用表单的submit方法发送一个浏览器表单。如下:

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

这次我们在submit方法中指定了提交的url,你同样可以在form的config中指定url属性。你同样可以在submit方法中指定更多的属性,比如提交成功和失败的回调函数来执行你业务逻辑。

示例代码:Forms.rar

作者:Ever
原文:http://www.cnblogs.com/evermaze/archive/2013/03/17/Sencha_Form.html