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，使用它可以让你的表单布局合理。

为了创建一个更丰富的页面，你可以尝试着试试这些组件。