在Sencha Touch 2中使用表单

创建一个表单

表单面板提供一套表单字段和访问/存储数据的简单方式。通常表单面板只包含你要显示的一套字段，在条目(item)配置中的排序如下：

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'

}

]

});

这里我们只是创建了一个简单表单面板，它可以用做注册表单注册到你的服务。我们为用户名字增加个普通文本字段，一个电子邮件字段，最后一个密码字段。在每个case里我们在字段里提供了一个名字配置，这样稍后我们就可以在表单加载或存储数据时标识它。

加载数据

使用上面我们创建的表单，我们可以用几种不同的方法把数据加载进去，最简单的方法就是使用setValues：

form.setValues({

name: 'Ed',

email: 'ed@sencha.com',

password: 'secret'

});

加载模型实例到表单中也很容易—假如我们有一个用户模型，要把特定的实例加进我们的表单。

Ext.define('MyApp.model.User', {

fields: ['name', 'email', 'password']

});

var ed = Ext.create('MyApp.model.User', {

name: 'Ed',

email: 'ed@sencha.com',

password: 'secret'

});

form.setRecord(ed);

检索表单数据

getValues方法可以很方便的从表单面板里取数据：

var values = form.getValues();

//values now looks like this:

{

name: 'Ed',

email: 'ed@sencha.com',

password: 'secret'

}

可以在单独字段上侦听变动事件，从而取得用户变动的及时通知。这里我们扩展上面的用户模型，只要任一字段改变就更新模型。

var form = Ext.create('Ext.form.Panel', {

listeners: {

'> field': {

change: function(field, newValue, oldValue) {

ed.set(field.getName(), newValue);

}

}

},

items: //as before

});

上面使用了Touch2.0的新功能—可以指定任何容器的子组件上的监听器。在这个case中，我们把监听器绑定到每个表单字段的变动事件，这里的表单字段是表单面板的一个直接子部分。监听器取得触发事件的字段的名字，用新值更新模型实例。例如，改变表单的电子邮件字段将会更新模型的电子邮件字段。

提交表单

有几个提交表单数据的方法。在上面的例子里有一个更新模型实例，可选用模型的save方法把改变传回服务器，而不用传统的表单提交。我们也可以用submit方法发送一个普通浏览器表单提交。

form.submit({

url: 'url/to/submit/to',

method: 'POST',

success: function() {

alert('form submitted successfully!');

}

});

在这个case里我们提供url来提交表单到内置的提交调用—你可以在创建表单的时候设置url配置项。我们可以指定其他参数(参照全列表submit)，包括针对成功/失败的回调函数，他们是否被调用取决于表单提交是否成功。在数据存储到服务器后，这些回调函数通常用来在你的应用中采取些动作。