摘要: 本教程教你如何入手去创建一个基本的表单。
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_dateactive四个表单字段构成。开头的两个表单字段nametitle,只是简单的文本字段,我们会用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');

下一步

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

http://www.ajaxjs.com/article.asp?id=2007598

转载于:https://www.cnblogs.com/wengjinbao/archive/2007/11/12/957382.html

学习EXT第九日:表单入门相关推荐

  1. 分步表单如何实现 html_HTML表单入门的分步指南

    分步表单如何实现 html by Abhishek Jakhar 通过阿比舍克·贾卡(Abhishek Jakhar) HTML表单入门的分步指南 (A step-by-step guide to g ...

  2. Ext.form 表单为什么第二次就不正常显示

    我的代码如下: Ext.onReady(function() { Ext.get('btn').on('click', function(){   var form = new Ext.form.Fo ...

  3. python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式

    本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍 表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...

  4. ASP.NET MVC 2 学习笔记二: 表单的灵活提交

    ASP.NET MVC 2 学习笔记二:  表单的灵活提交 前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...

  5. Vue学习笔记(六) 表单输入绑定

    v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据 注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...

  6. 12.6学习笔记 HTML5表单元素/嵌入图片/视频(未完)

    12.6学习笔记 一. HTML 表单元素(下) 二. HTML5嵌入图片与创建分区响应图 三. HTML5嵌入视频 一. HTML 表单元素(下) 主要内容: 用input元素获取有规定格式的字符串 ...

  7. 阿ken的HTML、CSS的学习笔记_表单的应用(笔记七)

    欢迎光临 你好 我是阿ken 文章目录 7.1_认识表单 7.1.1_表单的构成 7.1.2_创建表单 ( < form> 标记 ) 7.2_表单属性 1. action 属性 2. me ...

  8. HTML学习笔记二--表单及表格的结合使用个人简历制作

    部分内容转自:https://www.cnblogs.com/inmeditation/p/12171727.html 一.表格 1.表格标签 表格由 <table> 标签来定义.每个表格 ...

  9. 前后端分离学习笔记(5) ---[表单的增删改操作;以及为管理员上传头像]

    上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) -[路由嵌套, 查询表单显示] 文章目录 1.前端组件页面 添加管理员操作 修改管理员信息 删除管理员 为管理员上传头像 修改密码 ...

最新文章

  1. datatable报错 uncaught TypeError: Cannot read property 'aDataSort' of undefined
  2. autoenv的使用方法
  3. 人工智能、大数据、云计算、机器学习和深度学习,主要有什么关系?
  4. Spring Cloud【Finchley】- 21 Spring Cloud Stream 构建消息驱动微服务
  5. c语言 1 2是什么类型,C语言2-C数据类型(1).docx
  6. ubuntu安装Linux网络配置,CentOS和Ubuntu系统简要网络配置及常用网络管理工具汇总...
  7. mysql 手动执行event_MYSQL 定时自动执行EVENT
  8. 诗和远方:无题(五十一)
  9. PhpStorm下Laravel代码智能提示
  10. Android Studio Xposed模块编写(二)
  11. [轉]function, new function, new Function
  12. WPF程序,运行时,结束时,要运行的操作(自动保存,检查单程序)
  13. 拓端tecdat|R语言深度学习Keras循环神经网络(RNN)模型预测多输出变量时间序列
  14. 广东省零售连锁协会执行会长:技术更新太快,消费者才是零售企业最大的对手...
  15. 牛顿柯特斯公式及复合形式、龙贝格求积公式,高斯勒让德求积公式
  16. 全网最全最新的免版权图库
  17. ionic ion-refresher刷新完毕
  18. 中国大学慕课——程序设计与算法(一)第二周测验
  19. 慎重决定!从自建服务器到选择阿里云
  20. Java将PDF转为图片Jpg

热门文章

  1. HTTP1.0、HTTP1.1和HTTP2.0
  2. Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css
  3. 手机运行速度慢怎么办
  4. 没有逾期过借呗为什么被关了?
  5. 做训练营需要具备什么样必备条件?
  6. 学会放松,是通向生命觉‮的醒‬必经之路
  7. 在 PyCharm 中写代码
  8. 怎样知道别人在蹭我家wifi?
  9. Qt4_坐标系统变换
  10. SQL Server中的递归CTE和外键引用