菠萝三国

大江东去,浪淘尽...
随笔 - 34, 文章 - 47, 评论 - 22, 引用 - 0
数据加载中……

学习EXT第九日:表单入门

摘要: 本教程教你如何入手去创建一个基本的表单。
Author: Shea Frederick
Translater:Hegz
Published: May 05, 2007
Translated:May 14,2007
出处:http://www.fleaphp.org.cn/bbs/viewthread.php?tid=906&page=1&extra=page%3D1#pid4736

我建议下载用于这个例子的一段程序,这样可能对你有一些帮助。你也可以找一个有效的例子。

表单体
首先要做的第一件事就是创建一个表单体,这相当于在HTML中书写一个
标识。


var form_employee = new Ext.form.Form({
 labelAlign: 'right',
 labelWidth: 175,
 buttonAlign: 'right'
});
 创建表单字段
表单示例由name、title、hire_date和active四个表单字段构成。开头的两个表单字段name和title,只是简单的文本字段,我们会用TextField方法来创建它们。

重要的配置选项是name,定义该选项与HTML中定义一个表单字段名几乎一样。


var employee_name = new Ext.form.TextField({
 fieldLabel: 'Name',
 name: 'name',
 width:190
});

var employee_title = new Ext.form.TextField({
 fieldLabel: 'Title',
 name: 'title',
 width:190
});
 跟着的hire_date字段是一个日期字段,我们会用DateField方法来创建,它会为我们弹出一个别致的日期选择器来让我们选择日期。

format配置选项被用来为PHP指定日期格式标准(PHP的日期格式)。日期格式字符串的调整须与你所用的日期格式相匹配。

 

var employee_hire_date = new Ext.form.DateField({
 fieldLabel: 'Hire Date',
 name: 'hire_date',
 width:90,
 allowBlank:false,
 format:'m-d-Y'
});
 最后一个表单元素active是一个布尔值,我们使用Checkbox方法来创建。


var employee_active = new Ext.form.Checkbox({
 fieldLabel: 'Active',
 name: 'active'
});
 完成表单
现在,我们把表单里的所有表单字段加入到fieldset中去。当然了,如果你想在fieldset的外面进行,可以选择使用add方法。


form_employee.fieldset(
 {legend:'Employee Edit'},
 employee_name,
 employee_title,
 employee_hire_date,
 employee_active
)
 最后,最不能少的就是submit按钮,它与一小段的错误检测代码块一起被addButton方法加进来。当该按钮被点击,就会调用render方法,传入div标识的“id”,然后在网页的div里把表单显示出来。


form_employee.addButton('Save', function(){
 if (form_employee.isValid()) {
  Ext.MessageBox.alert('Success', 'You have filled out the form correctly.'); 
 }else{
  Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
 }
}, form_employee);

form_employee.render('employee-form');
 下一步

虽然本教程让你懂得了如何去创建一个表单,但创建出来的表单什么事情也干不了。就像一部没有引擎的小汽车——它看起来可能很漂亮,但不能让你走得更远。

posted on 2007-08-07 14:05 菠萝 阅读(581) 评论(0)  编辑  收藏 所属分类: EXT


只有注册用户登录后才能发表评论。


网站导航: