本文已添加至Sencha Touch 2快速入门系列索引:http://blog.csdn.net/ardy_c/article/details/7544470
转载请注明出处:http://blog.csdn.net/ardy_c/article/details/7497330
在应用中,很多时候需要和用户进行一些交互。表单(Forms)这个东西给我们提供了一个很好的接口。相信大家对传统的HTML表单已经非常熟悉。而Sencha Touch 2中的表单和传统的HTML表单没有太大区别。也正因为Sencha Touch 2是基于HTML5建立的,它的表单是对HTML5的表单功能进行了封装,提供了一些可选择的验证和数据提交方式,并提供了一套漂亮的外观。这一节,就给大家介绍一下表单的使用方法。
建立一个表单(Forms)
建立一个表单很简单,我们先上代码:
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'
}
]
}]
});
表单对应的类是Ext.form.Panel,该类直接继承于Ext.Panel。建立一个该类的实例,该实例相当于容器的存在,然后在其内部添加各种用于输入信息的组件(就是写html时,在form标签里面添加各种input标签、textarea标签等等)。
上面的代码中,作为formPanel子元素的是一个名为fieldset的组件。它的作用在于把各个用于输入的组件包装起来,使它们更加整齐美观。你甚至可以为它设置title属性,它自动在表单的顶部添加该title属性的值作为表单的标题,让用户更直接地认识到这个表单的用途。而在fieldset组件里,我们加了三个用于输入的组件--textfield、emailfield和passwordfield。其中email是HTML5新加入的input标签里type为email的输入类型,另外两个相信不用我在这里详说,你也会懂的。这样就建立一个最简单的表单,你可以执行下面完整代码,预览这段代码所生成的效果。完整代码如下:
Ext.application({
name: 'sample',
launch: function() {
var formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'fieldset',
title: 'My first form',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
Ext.Viewport.add(formPanel);
}
});
完善表单
就这样,我们成功建立了一个表单。是不是很简单?就是这么简单!当然,这还不是一个完整的表单。下面,我们一起来完善一下这张表单。
Ext.application({
name: 'sample',
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: 'Ed',
email: 'ed@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();
}
},
{
xtype: 'button',
text: 'Submit',
handler: function() {
formPanel.submit({
url: 'testSubmit.php',
method: 'POST',
success: function() {
alert('form submitted successfully!');
}
});
}
}
]
});
}
});
上面的代码是在原来的例子的基础上建立的,通过formPanel.add方法追加了一个子组件,类型是toolbar。顾名思义,添加toolbar就是为这个formpanel增加一个工具条。其中docked属性,是指固定停靠在哪里(顶部top, 底部bottom, 左边left, 右边right 四个选项)。上面选择停靠在bottom,就是底部。这里的layout属性被传入的是一个数据对象,里面设置的pack是指容器内部子元素的对齐方式(左对齐start,居中center,右对齐end)。在追加的toolbar里面,我们添加了四个按钮组件作为toolbar的子元素。
第一个按钮,设置text属性为Set Data,该属性是用于设置按钮上显示的文本内容。handler属性,是用于设置响应按钮点击事件的处理方法。这里的处理方法就是为表单填入一些固定的信息。其中,formPanel.setValue方法是用于设置表单内各项的值,传入参数是一个数据对象,数据对象内每一个属性名称必须和form内的每项的name属性对应,否则设值失败。
第二个按钮,响应点击事件的处理方法是用alert的方式显示表单内各项的值。Ext.Msg.alert 是一个静态方法,作用是弹出一个消息框,第一个参数是这个框的标题文本,第二个参数是需要显示的消息体。formPanel.getValues方法,是获取formPanel内部全部项的值。
第三个按钮,很简单、直接,重置表单,和html的type=reset一样效果。
第四个按钮,用于提交表单。formPanel.submit()方法实现在提交表单的操作,我们传进去了一个数据对象,里面设置了表单要提交的地址(url),提交方式(method),响应提交成功后的处理方法(success)。有一点需要注意的是,提交后响应页面需要返回 {"success":true} 的json,才会被认为是提交成功。
一张完整的表单出来了,大家尝试一下,看看是怎样的效果。当然,你需要自己准备一个处理提交的响应页面喔。