在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)，包括针对成功/失败的回调函数，他们是否被调用取决于表单提交是否成功。在数据存储到服务器后，这些回调函数通常用来在你的应用中采取些动作。