Extjs学习笔记之二 初识Extjs之Form
Extjs中的表单组件是Ext.form.BasicForm，不过最简单最常用的是Ext.form.FormPanel控件，它继承自Panel，具有一定的界面显示控制能力，它其中包含着一个BasicForm对象，用来执行向服务器提交，加载等动作。Extjs也对常用的html表单项进行了封装，提供了一些额外的功能，比如数据验证。实际使用的时候只要向FormPanel中添加这些表单项即可。常见的表单项有，TextField，NumberField,Radio,CheckBox等。
下面通过一个例子来介绍基本Form的使用。由于使用Form要和服务器端程序交互，方便起见，新建一个asp.net站点，把extjs的所有文件都添加到站点下面，再新建一个forms.htm文件，作为此次的样例文件，如下图： 
下面为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的表单验证功能，以后再介绍。下面介绍表单的提交。表单的提交依靠的是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按钮，可以看到从服务器端返回的数据：
最后介绍下如何从服务器端获得表单的信息并且填充客户端表单。要填充客户端，使用的是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学习笔记之二 初识Extjs之Form
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作.Extjs也对常用的html表单项进行了封装,提供了一些额外的功能,比如数据验证.实际使用的时候只要向FormPanel中添加这些表单项即可.常见的表单项有,TextField,NumberField,Radio,CheckBox等. 下面通过一个例子来
-
extjs 学习笔记（二） Ext.Element类
区别在于fly返回的是Element轻量级的,占用较少的内存,但是不保存对象的引用,每次使用都会改变先前的对象,而get则会缓存每次返回的Element对象,但是占用较多的内存.我们通过一个例子来说明二者的区别,同时看看Element给我们提供的强大功能.在我们项目中添加一个html页面,内容如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
-
PHP学习笔记之二 php入门知识
PHP学习笔记之二 1. 数组 PHP的数组其实是一个关联数组,或者说是哈希表.PHP不需要预先声明数组的大小,可以用直接赋值的方式来创建数组.例如: //最传统,用数字做键,赋值 $state[0]="Beijing"; $state[1]="Hebei"; $state[2]="Tianjin"; //如果键是递增的数字,则可以省略 $city[]="Shanghai"; $city[]="Tianjin&quo
-
python OpenCV学习笔记实现二维直方图
本文介绍了python OpenCV学习笔记实现二维直方图,分享给大家,具体如下: 官方文档 – https://docs.opencv.org/3.4.0/dd/d0d/tutorial_py_2d_histogram.html 在前一篇文章中,我们计算并绘制了一维的直方图.它被称为一维,因为我们只考虑一个特性,即像素的灰度强度值.但是在二维直方图中,你可以考虑两个特征.通常它用于寻找颜色直方图,其中两个特征是每个像素的色调和饱和度值. 有一个python样例(samples/python/c
-
CI框架学习笔记（二） -入口文件index.php
上一节(CI框架学习笔记(一) - 环境安装.基本术语和框架流程)中,我们提到了CI框架的基本流程,这里再次贴出流程图,以备参考: 作为CI框架的入口文件,源码阅读,自然由此开始.在源码阅读的过程中,我们并不会逐行进行解释,而只解释核心的功能和实现. 1. 设置应用程序环境 define('ENVIRONMENT', 'development'); 这里的development可以是任何你喜欢的环境名称(比如dev,再如test),相对应的,你要在下面的switch case代码块中,对设定的环
-
Android学习笔记（二）App工程文件分析
App工程文件分析 关于如何创建一个最简单的Android App请参照链接: < Android学习笔记(一)环境安装及第一个hello world > http://www.jb51.net/article/52593.htm 创建完的工程文件如下图所示,本文对一些主要的文件进行分析. src文件分析 App源文件如图: 打开源文件 MainActivity.java 可看到如下代码: 源码主要功能如下: App源文件目录 package com.example.firstapp; 导入A
-
Extjs学习笔记之一 初识Extjs之MessageBox
在其中新建一个my目录,以后所有的样例文件都新建在这个目录中.1.Hello world! 先看一个Extjs版的Hello World网页的全部代码: 复制代码 代码如下: <html> <head> <title>Extjs MessageBox</title> <link rel="Stylesheet" type="text/css" href="../resources/css/ext-all
-
ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任
-
extjs 学习笔记（一） 一些基础知识
我在项目中已经频繁使用了jquery,这次主要是学习使用extjs,但现有的教程基本都是针对2.0的,而且后台用到的语言也很少是.net平台下的C#,所以我打算针对3.0版,后台使用C#,记录下自己的学习过程,希望能和志同道合的朋友一起探讨,共同进步. extjs的官方网站是http://www.extjs.com,目前最高版本是3.0.2,但是只有3.0.0的才没有任何下载限制,可以点击这里下载3.0版的.下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例
-
ExtJs 学习笔记 Hello World!第1/2页
在了解基础后,可能会用Ext+ajax开发一个简单的小项目,会一点一滴的讲解项目开发过程,希望能给大家带来收获!因为我本人也在学习这个框架,所以对文章有什么建议请提出,这样可能会让我学到更多. 看到这幅图,你可能认为是某个软件,或者是Flash.Flex.silverlight等等,但这是javascript+Css实现的. 在看这样式与效果,如果加在自己的项目里,用户视觉与操作的体验应该会很爽吧. 还有更多的特效就不一一截图了. 下面开始说一下这个组件,ExtJs是一个不错的Ajax