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

 

转载于:https://www.cnblogs.com/evermaze/archive/2013/03/17/Sencha_Form.html