表单Ext.form.FormPanel(转)
1、表单
对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel,在Panel的基础上提供与表单相关的各种特性,比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等;另外FormPanel固定使用form布局,前面关于布局一节中的内容我们说过,form布局也就是专门用于组织包含输入元素的布局。
看下面的代码:
<script type="text/javascript">
Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo: Ext.getBody(),
title:"用户信息录入",
height: ,
width: ,
labelWidth: ,
labelAlign: "right",
frame: true,
defaults:{
xtype:"textfield",
width:
},
items: [
{name: "username", fieldLabel: "姓名"},
{name: "password", fieldLabel: "密码", inputType: "password"},
{name: "email", fieldLabel: "电子邮件"},
{xtype: "textarea", name: "intro", fieldLabel: "简介"}
],
buttons:[{text:"提交"}, {text:"取消"}]
});
});
</script>
运行效果如下:
在上面的代码中,使用new Ext.form.FormPanel来创建表单面板,通过labelWidth来指定表单中字段标签的宽度,labelAlign来指定字段标签的对齐方式,在defaults中指定该容器中所有子元素默认类型都是textfield,也就是录入文本框。在items定义的子元素中,一共包含三个textfield元素以及一个textarea元素,这些元素都包含一个name属性,相当于传统<input>标签中的name属性,fieldLabel属性用来指定字段标签。
2、BasicForm
表单面板FormPanel包含一个form属性,该属性是一个Ext.form.BasicForm 类型的对象,可以直接访问,也可以通过getForm()方法得到。BasicForm 表示基本的表单,包含了submit、load、reset等方法,用来取代传统表单<form>中的submit、reset等方法,通过调用这些方法可以实现提交表单、表单信息重置等操作。下面的代码实现了表单的提交操作:
<script type="text/javascript">
Ext.onReady(function(){
var f=new Ext.form.FormPanel({
renderTo: Ext.getBody(),
title:"用户信息录入",
height: ,
width: ,
labelWidth: ,
labelAlign: "right",
frame: true,
defaults:{
xtype:"textfield",
width:
},
items: [
{name: "username", fieldLabel: "姓名"},
{name: "password", fieldLabel: "密码", inputType: "password"},
{name: "email", fieldLabel: "电子邮件"},
{xtype: "textarea", name: "intro", fieldLabel: "简介"}
],
buttons:[{
text:"提交",
handler: function(){
f.form.submit({
waitTitle:"请稍候",
waitMsg:"正在提交表单数据,请稍候"
});
}
}, {
text:"重置",
handler: function(){
f.form.reset();
}
}]
});
});
</script>
运行结果如下:
3、Field,表单元素
Field代表各种各样的数据录入项;在程序中,我们一般直接使用Field的子类,包括Checkbox, CheckboxGroup, CompositeField, DisplayField, Hidden, HtmlEditor, SliderField, TextField等。
Field组件一般包括一个fieldLabel属性及name属性。fieldLabel是在Component中定义的,用来定义字段的元素。
4、表单动作Ext.form.Action
表单动作包括表单内容提交Submit,表单数据加载Load两种。默认情况下都是通过Ajax的方式向服务器端发送数据,提交表单数据或加载表单中的内容。
关于表单动作Action,我们将在后面的课程中讲解。
表单Ext.form.FormPanel(转)的更多相关文章
- Ext JS表单Ext.form.FormPanel
1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自 ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- [转载]WebBrowser控件表单(form)的自动填写和提交
话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这个ActiveX控件了.这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢). ...
- 表单插件——form
表单插件——form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下: $(form). a ...
- 一天搞定CSS:表单(form)--20
1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UT ...
- 表单组件 form fastadmin(生成表单元素)
Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form
表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...
- Django笔记 —— 表单(form)
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- Django使用普通表单、Form、以及modelForm操作数据库方式总结
Django使用普通表单.Form.以及modelForm操作数据库主要应用于增删该查的情景下,流程通用如下,只是实现方式不一样: 进入填写表单页面: 在表单页面填写信息,并提交: 表单数据验证 验证 ...
随机推荐
- 递推DP HDOJ 5328 Problem Killer
题目传送门 /* 递推DP: 如果a, b, c是等差数列,且b, c, d是等差数列,那么a, b, c, d是等差数列,等比数列同理 判断ai-2, ai-1, ai是否是等差(比)数列,能在O( ...
- Spark源码分析(三)-TaskScheduler创建
原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3879151.html 在SparkContext创建过程中会调用createTaskScheduler函 ...
- lintcode:整数排序||
题目 给一组整数,按照升序排序.使用归并排序,快速排序,堆排序或者任何其他 O(n log n) 的排序算法. 解题 归并排序 public class Solution { /** * @param ...
- MYSQL 当有两条重复数据时 保留一条
delete from test where id in (select id from (select max(id) as id,count(text) as count from test ...
- VS2013编译OpenSSL
简述 OpenSSL是一个开源的第三方库,它实现了SSL(Secure SocketLayer)和TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的开发人 ...
- Swagger PHP使用指南
先说什么是Swagger, Swagger的使用目的是方便优美的呈现出接口API的各种定义, 生成API文档, 包括参数, 路径之类. 有时后端改了API的参数或者其他设置, 前端直接看这个Swagg ...
- iOS xcode设置
Xcode build search paths c/c++ 头文件引用问题include <> 引用编译器的类库路径下的头文件include “” 引用工程目录的相对路径的头文件 inc ...
- Tomcat常见内存溢出的解决办法
PermGen space错误解决方法 在看下文之前,首先要确认意见事情,就是你是如何启动tomcat的,我们在平时的开发环境当中,都是通过startup.bat方式启动tomcat的,那么你按照下面 ...
- iOS:核心动画具体的类和协议的介绍
核心动画类:CAAnimation.CAPropertyAnimation.CABasicAnimation.CAKeyframeAnimation.CATransition.CAAnimationG ...
- PowerDesigner将PDM导出生成WORD文档
PowerDesigner将PDM导出生成WORD文档 环境 PowerDesigner15 1.点击Report Temlates 制作模板 2.如果没有模板,单击New图标创建.有直接双击进入. ...