Extjs学习笔记之二 初识Extjs之Form


Posted in Javascript onJanuary 07, 2010

Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。Extjs也对常用的html表单项进行了封装,提供了一些额外的功能,比如数据验证。实际使用的时候只要向FormPanel中添加这些表单项即可。常见的表单项有,TextField,NumberField,Radio,CheckBox等。

下面通过一个例子来介绍基本Form的使用。由于使用Form要和服务器端程序交互,方便起见,新建一个asp.net站点,把extjs的所有文件都添加到站点下面,再新建一个forms.htm文件,作为此次的样例文件,如下图:
Extjs学习笔记之二 初识Extjs之Form 
下面为forms.htm添加代码,主要是为FormPanel添加表单项:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Extjs FormPanel</title> 
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> 
<style type="text/css"> 
.allow-float{clear:none !important;} 
.stop-float{ clear:both !important;} 
.float-left{float:left;} 
</style> 
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-all.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif'; 
Ext.QuickTips.init(); //初始化信息提示功能 
var loginForm = new Ext.form.FormPanel({ 
title: 'A Simple FormPanel', 
height: 300, 
width: 300, 
frame: true, 
labelSeparator: ':', 
labelWidth: 60, 
labelAlign: 'right', 
applyTo: 'form', 
items: [ 
new Ext.form.TextField({ 
id: 'Name', 
fieldLabel: 'Name', 
allowBlank: false, 
blankText: '必填字段', 
msgTarget: 'qtip' 
}), 
new Ext.form.TextField({ 
id:'Password', 
fieldLabel: 'Password', 
allowBlank: false, 
inputType: 'password', 
blankText: '必填字段', 
//msgTarget: 'qtip' 
msgTarget: 'side' 
}), 
new Ext.form.TextField({ 
id: 'email', 
fieldLabel: 'E-Mail', 
allowBlank: false, 
selectOnFocus: true, 
inputType: 'Text', 
msgTarget: 'side', emptyText: '必填字段', 
regex: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, 
regexText: 'Email 格式不正确' 
}), 
new Ext.form.NumberField({ 
id: 'age', 
fieldLabel: 'Age', 
allowNegative: false, 
decimalPrecision: 0, 
maxValue: 100, 
maxText: '输入的数字最大是100' 
}), 
new Ext.form.TextArea({ 
id: 'remark', 
fieldLabel: 'Remark', 
width: 200 
}), 
new Ext.form.Radio({ 
name: 'sex', 
itemCls: 'float-left', 
clearCls: 'allow-float', 
fieldLabel: 'Sex', 
boxLabel: 'Male' 
}), 
new Ext.form.Radio({ 
name: 'sex', 
clearCls: 'stop-float', 
boxLabel: 'Female', 
hideLabel: true 
}), 
new Ext.form.Checkbox({ 
name: 'hobby', 
clearCls: 'allow-float', 
itemCls: 'float-left', 
boxLabel: 'Football', 
fieldLabel: 'Hobby' 
}), 
new Ext.form.Checkbox({ 
name: 'hobby', 
clearCls: 'allow-float', 
itemCls: 'float-left', 
hideLabel: true, 
boxLabel: 'Ping-Pang' 
}), 
new Ext.form.Checkbox({ 
name: 'hobby', 
clearCls: 'stop-float', 
hideLabel: true, 
boxLabel: 'Basketball' 
}) 
], 
buttons: [new Ext.Button({ 
text: 'OK', 
handler: login 
}) 
] 
}); 
function login() { 
loginForm.getForm().submit({ 
clientValidation: true, 
waitMsg: 'Please wait...', 
waitTitle: 'Hint', 
url: 'simpleForm.ashx', 
method: 'GET', 
success: function(form, action) { 
Ext.Msg.alert('Hint', 'Get Success:Your Name is '+action.result.msg.Name+" Pwd: "+action.result.msg.Password); 
}, 
failure: function(form, action) { 
Ext.Msg.alert('Hint', 'Get Failed' + action.failureType); 
} 
}); 
}; 
}); 
</script> 
</head> 
<body> 
<div id="form"> 
</div> 
</body> 
</html>

构造FormPanel的时候需要通过applyTo属性指定将这个Panel加载到什么区域,applyTo的值一般是div的id。FormPanel的items属性就是一个表单项的数组。TextField可以指定是否允许为空,NumberField也可以,还可以指定最大值、最小值的限制。值得注意的是这些表单项中的itemCls和clearCls属性,可以通过这些属性给表单项附加css以实现自己想要的效果。其中itemCls是附加在表单项本身上面的,clearCls是附加在一个紧贴着该表单项的空白div上面的。buttons属性中可以添加按钮对象。暂时忽略提交函数,到现在为止,一个表单已经完成:
Extjs学习笔记之二 初识Extjs之Form 
这个表单具有较一致的外观,也具有了常见的验证功能,关于更多extjs的表单验证功能,以后再介绍。下面介绍表单的提交。表单的提交依靠的是Basicform的submit方法。可以通过调用FormPanel的getForm方法获得BasicForm,再调用它的submit方法,submit方法中主要的参数是要提交的url地址,提交的方式GET/POST,以及提交失败和成功后的两个处理函数sucess和failure。这两个处理函数都有两个参数,一个是当前的form还有一个是Action对象,Action对象中主要记录了这次提交(也可以是加载)的主要信息,主要有失败类型failureType,和服务器端的返回信息result。failureType可以是Action.CLIENT_INVALID,CONNTECT_FALIURE,LOAD_FALURE,SERVER_INVALID, 这些都是在Action中定义的公共属性,实际上是一个string。下面主要介绍从服务器返回的result,extjs对于从服务器端返回的信息有着比较严格的要求,默认情况下,服务器端返回的应该是一个json字符串,且其中有一个属性是success,类型是boolean,用来指示此次提交成功,其余的属性可以是其他自定义的返回数据。

例如下面就是一个服务器端返回的样例:

{ 
"success":true, // note this is Boolean, not string 
"msg":"Updated Successfully!" 
}

下面为这个htm页面编写一个服务器响应页面,新建一个Generic Handler页面 SimpleForm.ashx,这个响应很简单,就是把提交上来的姓名和密码再返回给客户端。要返回的数据应该是类似于:

{success:true,msg:{Name:xxx,Password:xxxx}}

应此编写此响应如下:

public void ProcessRequest (HttpContext context) { 
string s = context.Request.Params["Name"]; 
string pwd = context.Request.Params["Password"]; 
if (s == null) s = "null"; 
string result = "{success:true,msg:{Name:\""+s+"\",Password:\""+pwd+"\"}}"; 
context.Response.ContentType = "text/plain"; 
context.Response.Write(result); 
}

运行程序,填写必要的信息,点击OK按钮,可以看到从服务器端返回的数据:Extjs学习笔记之二 初识Extjs之Form 最后介绍下如何从服务器端获得表单的信息并且填充客户端表单。要填充客户端,使用的是BasicForm的load方法,该方法默认要求从服务器端获得一个json字符串,和submit类似,也需要一个success属性,其余的是表单字段信息,只要属性的名字和表单项的名字相同,这个填充过程是自动完成的,这点很方便。为这个表单添加一个load按钮,用来从服务器获取表单信息:
buttons: [new Ext.Button({ 
text: 'OK', 
handler: login 
}), 
new Ext.Button({ 
text: 'Load', 
handler: loadData 
}) 
]loadData的方法为:function loadData() { 
loginForm.getForm().load({ 
clientValidation: false, 
waitMsg:'Loading...', 
url: 'simpleFormLoad.ashx', 
method: 'GET' 
}); 
}注意,由于load数据不需要进行客户端验证,所以将clientValidation设为false。相应的simpleFormLoad.ashx服务器端代码为: public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
context.Response.Write("{success:true,data:{Name:\"ServerReply\",age:10,email:\"yinzixin1985@hotmail.com\"}}"); 
}

点击Load按钮,你将看到:
Extjs学习笔记之二 初识Extjs之Form 

数据顺利的从服务器端返回并且自动填充到表单中。

本文主要介绍extjs表单的基本概念,以及如何与服务器进行简单的交互。这些内容并不足以应付实际需求,下面几篇文章会介绍一些更加实用的内容。

Javascript 相关文章推荐
ajax异步刷新实现更新数据库
Dec 03 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
AngularJS执行流程详解
Feb 17 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 #Javascript
jQuery DOM操作小结与实例
Jan 07 #Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 #Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 #Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 #Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 #Javascript
javascript 模拟点击广告
Jan 02 #Javascript
You might like
一些关于PHP的知识
2006/11/17 PHP
PHP 选项及相关信息函数库
2006/12/04 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
python 排列组合之itertools
2013/03/20 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Selenium定位元素操作示例
2018/08/10 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
机电专业大学生求职信
2013/10/04 职场文书
阅兵口号
2014/06/19 职场文书
迎国庆演讲稿
2014/09/15 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
会计实训报告范文
2014/11/04 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers