Ext Js 3.2的一个FormPanel的综合应用
1：程序代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>formPanel</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var loginform = new Ext.form.FormPanel({
title: '录入信息',
width: 650,
autoHeight: true,
frame: true,
renderTo: 'form1',
labelWidth: 65,
labelAlign: 'right',
standardSubmit: true, //是否提交表单
url: 'doForms.jsp',
method: 'post',
items: [{
layout: 'column',
items: [{ //第一行
columnWidth: .3,
layout: 'form',
items: [{
xtype: 'textfield',
allowBlank: false,
fieldLabel: '姓',
name: 'firstName',
id: 'firstName',
width: 120
}]
}, {
columnWidth: .3,
layout: 'form',
items: [{
xtype: 'textfield',
allowBlank: false,
fieldLabel: '名',
width: 120
}]
}, {
columnWidth: .3,
layout: 'form',
items: [{
xtype: 'textfield',
allowBlank: false,
fieldLabel: '英文名字',
width: 120
}]
}]
}, { //第二行
layout: 'column',
items: [{
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '座右铭',
width: 500
}]
}]
}, { //第三行
layout: 'column',
items: [{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'datefield',
format: 'Y-m-d',
allowBlank: false,
fieldLabel: '获奖日期',
width: 180
}]
}, {
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'numberfield',
fieldLabel: '获奖数目',
width: 180
}]
}]
}, { //第四行
xtype: 'textarea',
fieldLabel: '奖励',
width: 500
}, { //第五行
xtype: 'fieldset',
title: '明星最爱',
autoHeight: true,
width: 570,
defaultType: 'checkbox',
hideLabels: true,
items: [{
boxLabel: '周杰伦',
checked: true,
inputValue: '1'
}, {
boxLabel: '谢霆锋',
inputValue: '2'
}, {
boxLabel: '威尔史密斯',
inputValue: '3'
}, {
boxLabel: '尼古拉斯凯奇',
inputValue: '4'
}]
}, { //第六行
layout: 'form',
items: [{
xtype: 'htmleditor',
enableColors: false,
enableAlignments: false,
fieldLabel: '获奖文章',
height: 150,
value: '好好学习ext js'
}]
}],
buttonAlign: 'center', //定义button的对齐方式
buttons: [{
text: '提交',
handler: function() {
Ext.Msg.alert('提交啦', '提交');
if(!loginForm.getForm().isValid()) return;
loginform.getForm().submit({
success: function() {
Ext.Msg.alert('成功', '提交成功');
},
failure: function() {
Ext.Msg.alert('失败', '提交失败');
}
});
}
}, {
text:'重置',
handler: function() {
alert('aaa');
loginform.getForm().reset();
}
}]
});
});
</script>
</head>
<body>
<div id="form1"> </div>
</body>
</html>
2：程序效果图