表单是在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,使用它可以让你的表单布局合理。
为了创建一个更丰富的页面,你可以尝试着试试这些组件。