Extjs初始化/提交Ext.form.FormPanel，表单中包含textfield,textarea,radio,checkbox,combo等

来源：互联网发布：淘宝网天堂伞编辑：程序博客网时间：2024/05/16 11:56

如题，废话不多说，直接上图：

点击submit提交表单，点击load初始化表单，

文件内容如下：

formaction.jsp

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

<%@ 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>EasyExt demo</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="ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var formpanel = new Ext.form.FormPanel({
title : '用户信息',
height : '300px',
layout : 'form',
renderTo : 'testDiv',
defaults : {
width : 600
},
bodyStyle: 'text-align: left; padding-top:10px',
border: true,
labelWidth: 90,
labelAlign: 'right',
frame : true,
items : [
{
fieldLabel : '中文名',
xtype : 'textfield',
name : 'name'
},
{
fieldLabel : '性别',
xtype : 'radiogroup',
items: [
{boxLabel: '男', name: 'gender', inputValue: 1, checked: true},
{boxLabel: '女', name: 'gender', inputValue: 0}
]
},
{
fieldLabel : '年龄',
xtype : 'numberfield',
name : 'age'
},
{
fieldLabel : '生日',
xtype : 'datefield',
name : 'birthday'
},
{
fieldLabel : '出生地',
name : 'city',
xtype : 'combo',
mode: 'remote',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false,
resizeable: true,
store : new Ext.data.JsonStore({
url : 'action/getCombo.jsp',
autoDestroy : true,
autoLoad : true,
root: 'data',
fields: ['value', 'text']
})
},
{
fieldLabel : '兴趣爱好',
xtype : 'checkboxgroup',
columns : 3,
id: 'interest',
items: [
{boxLabel: 'WarIII', id : 'interest-war3', value: '1'},
{boxLabel: '小说', id: 'interest-novel', value: '2'},
{boxLabel: '音乐', id: 'interest-music', value: '3'},
{boxLabel: '电影', id: 'interest-film', value: '4'},
{boxLabel: '淘宝', id: 'interest-taobao', value: '5'}
]
},
{
xtype : 'textarea',
fieldLabel : '备注',
name : 'remark'
},
{
fieldLabel : '填表时间',
xtype : 'textfield',
id : 'createTime',
name : 'createTime',
cls: 'Wdate',
listeners: {
'focus': function() {

// Extjs很恶心，原装没有选择时分秒的日期组件
WdatePicker({el : 'createTime', skin : 'ext', dateFmt : 'yyyy-MM-dd HH:mm:ss'});
}
}
},
{
xtype : 'htmleditor',
fieldLabel : '自我介绍',
name : 'decription'
}
],
buttons : [
{
text : 'submit',
handler : function (e) {
formpanel.getForm().submit({
url: 'action/submitUser.jsp',
params: {
},
success: function(form, action) {
Ext.Msg.alert("submit success", action.result.result);
},
failure: function(form, action) {
Ext.Msg.alert("submit failed", action.result.errorMessage);
}
});
}
},
{
text : 'load',
handler : function (e) {
formpanel.getForm().load({
url: 'action/loadUser.jsp',
params: {
},
success : function(form, action) {

},
failure: function(form, action) {
Ext.Msg.alert("load failed", action.result.errorMessage);
}
});
}
}
],
buttonAlign : 'center'
});
});
</script>
</head>
<body">
<div id="testDiv", style="width:800px;height:300px;"></div>
</body>
</html>

getCombo.jsp

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

loadUser.jsp

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="net.sf.json.*"%>
<%@ page contentType="text/json; charset=UTF-8"%>
<%
Map<String, Object> result = new HashMap<String, Object>();
result.put("success", true);
Map<String, Object> data = new HashMap<String, Object>();
data.put("name", "wayne.wang");
data.put("age", 25);
data.put("gender", 0);
data.put("birthday", "1986-05-30");
data.put("createTime", "2011-12-12 12:12:12");
data.put("city", "HZ");
data.put("remark", "备注");
data.put("decription", "很黄很暴力");
// checkbox很恶心，根据id设定是否checked
Map<String, Boolean> interest = new HashMap<String, Boolean>();
interest.put("interest-war3", true);
interest.put("interest-taobao", true);
interest.put("interest-music", false);
data.put("interest", interest);
result.put("data", data);
System.out.println(JSONObject.fromObject(result).toString(4));
out.write(JSONObject.fromObject(result).toString(4));
%>
<%--
输出的JSON字符串：
{
"data": {
"createTime": "2011-12-12 12:12:12",
"birthday": "1986-05-30",
"remark": "备注",
"interest": {
"interest-taobao": true,
"interest-war3": true
},
"age": 25,
"name": "wayne.wang",
"gender": 0,
"decription": "很黄很暴力",
"city": "HZ"
},
"success": true
}
--%>

submitUser.jsp

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/json; charset=UTF-8" %>
<%
Enumeration<String> names = request.getParameterNames();
while (names.hasMoreElements()) {
String name = names.nextElement();
String value = request.getParameter(name);
if (value == null || "".equals(value)) {
System.out.println(name + " = " + request.getParameterValues(name));
}
else {
System.out.println(name + " = " + value);
}
}
out.write("{ success : true }");
%>