在这个例子中使用了一些Extjs中常用的控件，具体属性和方法再使用的时候可以参考Extjs文档。
样式:
formshow.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
List list = new ArrayList() ;
list.add("河南") ;
list.add("山东");
list.add("广西");
list.add("云南");
JSONArray jsonArray = JSONArray.fromObject(list) ;
String json = jsonArray.toString() ;
System.out.println(json) ;
List listCity = new ArrayList() ;
%>
<html>
<head>
<base href="<%=basePath%>">
<title>form表单综合展现</title>
<!-- EXTJS -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=basePath%>ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>ext3/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath%>ext3/dwrext.js"></script>
<script type="text/javascript" src="js/formshow.js"></script>
<script type="text/javascript">
var json = <%= json%> ; //将服务器中数据转换本地数据
</script>
</head>
<body>
<div id='formShow'></div>
<select id="select"> <!-- 在Extjs中使用comboBox样式显示 -->
<option value="1">浪曦</option>
<option value="2">博客园</option>
<option value="3">百度</option>
<option value="4">新浪</option>
</select>
</body>
</html>
formshow.js
Ext.onReady(function(){
Ext.QuickTips.init() ;
Ext.form.Field.prototype.msgTarget = 'side' ;
//自定义验证
Ext.apply(Ext.form.VTypes,{
password : function(val , field ){ //val 文本框中得值 ,field为配置的文本域
if(field.confirgTo){ //confirgTo为在field中配置的属性 指向另一个password的ID
var pas = Ext.getCmp(field.confirgTo).getValue() ;
if(val != pas){
return false ;
}
}
return true ;
}
},'请输入相同密码' ) ;
/*-----------------------------下拉选择框-------------------------*/
var data =[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
var store = new Ext.data.SimpleStore({
fields: ['chinese', 'english'],
data : data
})
/*--------------------------------------------------------------*/
var form = new Ext.form.FormPanel({
title : 'form综合展现' ,
frame : true ,
paint : true ,
width : 600 ,
x : 200 ,
y : 400 ,
autoHeight : true ,
autoScroll : true ,
labelAlign : 'right' ,
buttonAlign : 'center' ,
renderTo : 'formShow' ,
method : 'post' ,
items : [
{
xtype : 'fieldset' ,
title : 'fieldset' ,
layout : 'column' ,
items : [
{
labelAlign : 'right' ,
layout : 'form' ,
columnWidth : '.5' ,
defaults : {
xtype : 'textfield' ,
allowBlank : false ,
width : 150
},
items : [
{
fieldLabel : '用户名' ,
name : 'user_name' ,
id : 'user_name' ,
value : 'user_name' ,
blankText : '请输入用户名' ,
emptyText : '请输入用户名'
},{
fieldLabel : '邮箱',
name : 'email' ,
id : 'email' ,
blankText : 'Email不能为空' ,
emptyText : '请输入Email' ,
vtype : 'email' , //email ,url ,alpha字符 ，alphanum字符数字
vtypeText : '请输入正确的邮箱地方'
}
]
},{
labelAlign : 'right' ,
layout : 'form' ,
columnWidth : '.5' ,
defaults : {
xtype : 'textfield' ,
allowBlank : false ,
width : 150
},
items : [
{
fieldLabel : '密码' ,
name : 'password' ,
id : 'password' ,
inputType : 'password' ,
blankText : '请输入密码' ,
listeners : {
blur : function(field){
var pasField = Ext.getCmp('repassword') ;
pasField.validate(); //执行验证
}
}
},{
fieldLabel : '确认密码' ,
name : 'repassword' ,
id : 'repassword' ,
inputType : 'password' ,
vtype : 'password' ,
confirgTo : 'password' ,
vtypeText : '请确认密码是否相同' ,
blankText : '请输入确认密码'
}
]
}
]
},{
xtype : 'fieldset' ,
title : '日期' ,
layout : 'column' ,
defaults : {
columnWidth : '.5'
},
items : [
{
layout : 'form' ,
labelWidth : 80 ,
items : [{
xtype : 'datefield' ,
fieldLabel : '日期' ,
format : 'Y-m-d',
id : 'date' ,
name : 'date' ,
emptyText : '请选择日期' ,
minValue : '2011-10-10' , //最小日期
minText : '请选择正确日期' ,
maxValue : '2015-12-31' ,
maxText : '请选择正确日期' ,
minLength : 5 ,
minLengthText : '超过最小长度' ,
regex : '' , //当数据验证过后再判断 若符合通过,否则显示regexText信息
regexText : '请输入指定格式数据' ,
validator : function(value){ //验证函数 参数field中值
if(value.length == 0){
return "请选择日期" ; //若验证没有通过,显示该消息
}
},
// allowBlank : false ,
//blankText : '请选择日期' ,
width : 150
}]
},{
layout : 'form' ,
labelWidth : 80 ,
items : [{
xtype : 'timefield' ,
width : 150 ,
fieldLabel : '时间日期'
}]
}
]
},{
xtype : 'textfield' ,
inputType : 'file' , //password file
fieldLabel : '文件' ,
width : 400
},{
xtype : 'fieldset',
title : 'radiogroup' ,
items : {
xtype : 'radiogroup' ,
fieldLabel : 'RadioGroup' ,
width : 400 ,
vertical : true ,
columns : 3 ,
items : [
{boxLabel : 'itme1' ,name : 'item' , id : 'item1',checked : true },
{boxLabel : 'itme2' ,name : 'item' , id : 'itme2'},
{boxLabel : 'itme3' ,name : 'item' , id : 'itme3'},
{boxLabel : 'itme4' ,name : 'item' , id : 'itme4'},
{boxLabel : 'itme5' ,name : 'item' , id : 'itme5'}
]
}
},{
xtype : 'combo' , //选择框
fieldLabel : '省份' ,
emptyText : '请选择……' ,
disabled : false , //是否可用
// editable : false , //是否可手工写入
valueNotFoundText : '数据没有找到' ,
forceSelection : true ,
selectOnFocus : true , //获取焦点时选择
loadingText : '数据正在加载……' , //当mode 为remote时使用
mode: 'local', //local /remote
store : json
},{
xtpe : 'fieldset' ,
title : '选择框联动',
layout : 'column' ,
defaults : {
columnWidth : '.5'
},
items : [
{
layout : 'form' ,
items : {
xtype : 'combo' ,
emptyText : '请选择城市……' ,
fieldLabel : '城市' ,
id : 'city' ,
name : 'city' ,
displayField : 'chinese' , //当多维数组时 要显示的字段
mode : 'local' ,
store : store ,
listeners : {
"select" : function(){ //其他事件一样使用
var selectValue = Ext.getCmp("city").getEl().dom.value ;
alert(selectValue) ;
}
}
}
},{
layout : 'form' ,
items : {
xtype : 'combo' ,
emptyText : '请选择地区……' ,
fieldLabel : '地区' ,
id : 'country' ,
name : 'country' ,
editable : false , //是否可编辑 默认为true
displayField : 'english' , //当多维数组时 要显示的字段
mode : 'local' ,
store : store ,
listeners : {
"select" : function(){ //其他事件一样使用
var selectValue = Ext.getCmp("country").getEl().dom.value ;
alert(selectValue) ;
}
}
}
}
]
},{
xtype : 'combo' ,
fieldLabel : '应用Extjs样式' ,
transform:"select" , //将html中select应用Extjs样式 html中ID
width : 200
}
],
buttons : [
{
text : '一般方式提交' ,
handler : function(){
if(form.getForm().isValid()){
var dform = form.getForm().getEl().dom ;
dform.action = 'doform.jsp' ;
dform.method = 'post' ,
dform.submit();
}
}
},{
text : 'ajax方式提交',
handler : function(){
if(form.getForm().isValid()){
form.getForm().submit({
url : 'doform.jsp' ,
waitMsg : '正在提交,请稍等……' ,
timeout : 1000 ,
success : function(form,action) {
alert('提交成功') ;
},
failure : function(form,action) {
alert('提交失败') ;
}
});
}
}
},{
text : '重置' ,
handler : function(){
form.getForm().reset();
}
},{
text : '操作',
handler : function(){
//方法:validate() 验证
//un(event,handler) removeListener(event,handler) 去除事件触发器
//show() 显示 hide()隐藏 setVisible(boolean) 是否可见
//setValue(value) 设值(会验证该值) setRawValue(value) 设置(不验证) getValue() 取值
//setWidth(width) 设置宽度 setHeight 设置高度
//setDisabled(boolean) disable() enable() 设置是否可用
//reset() 重置
//isValid(boolean) true 不验证 false验证(默认) 返回验证结果
//getId() getName() getEl()
var user_nameField = Ext.getCmp('user_name') ; //由id获得组件
var user_name = user_nameField.getValue() ; //获取field的值
user_nameField.setValue('你好'); //设置值
user_nameField.setDisabled(true) ; //设置为不可用
user_nameField.disable() ;
user_nameField.enable() ; //设置可用
user_nameField.hide() ; //隐藏
user_nameField.show() ; //显示
var id = user_nameField.getId() ; //获取ID
//事件:change(field,newValue,oldValue) ,blur(field) ,focus(field) ,disable ,enable ,valid(field)
user_nameField.on('change',function(field ,newValue ,oldValue){ //当改变时触发该事件
alert('改变后的值:'+newValue) ;
})
}
}
]
}) ;
})
doform.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@page import="net.sf.json.JSONObject"%>
<%
request.setCharacterEncoding("gbk") ;
String user_name = request.getParameter("user_name") ;
String email = request.getParameter("email") ;
String password = request.getParameter("password") ;
String rePassword = request.getParameter("repassword") ;
String city = request.getParameter("city") ;
Map map = new HashMap() ;
map.put("user_name",user_name) ;
map.put("email" ,email) ;
map.put("password",password) ;
map.put("rePassword" ,rePassword) ;
map.put("city" ,city) ;
map.put("success" ,true) ;
System.out.println(city) ;
JSONObject jsonObject = JSONObject.fromObject(map) ; //将对象封装成json格式
String json = jsonObject.toString() ;
response.getWriter().print(json) ; //用于向前台传送数据
%>