Extjs初始化/提交Ext.form.FormPanel,表单中包含textfield,textarea,radio,checkbox,combo等
2011-12-20 17:37
736 查看
如题,废话不多说,直接上图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/04/1f19bcb03264675391f659fef45c2ed4.gif)
点击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',
ha
b9e8
ndler : 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
<%@ 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>();
List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("text", "上海");
map.put("value", "SH");
data.add(map);
map = new HashMap<String, Object>();
map.put("text", "北京");
map.put("value", "BJ");
data.add(map);
map = new HashMap<String, Object>();
map.put("text", "杭州");
map.put("value", "HZ");
data.add(map);
result.put("success", true);
result.put("data", data);
result.put("total", 3);
out.write(JSONObject.fromObject(result).toString(4));
%>
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 }");
%>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/04/1f19bcb03264675391f659fef45c2ed4.gif)
点击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',
ha
b9e8
ndler : 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
<%@ 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>();
List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("text", "上海");
map.put("value", "SH");
data.add(map);
map = new HashMap<String, Object>();
map.put("text", "北京");
map.put("value", "BJ");
data.add(map);
map = new HashMap<String, Object>();
map.put("text", "杭州");
map.put("value", "HZ");
data.add(map);
result.put("success", true);
result.put("data", data);
result.put("total", 3);
out.write(JSONObject.fromObject(result).toString(4));
%>
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 }");
%>
相关文章推荐
- ExtJS学习笔记(5)- Form表单的提交 -Ext.FormPanel
- Ext.form.Panel 表单提交问题
- Extjs4循序渐进(三)——表单及表单控件详解一(表单布局和基础控件 Text,TextArea,Number,Checkbox,Radio,Date)
- extjs中form.panel中包含文本框与文件上传时,提交方式
- [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist
- ExtJS学习笔记(1)-表单验证,Ext.FormPanel
- Ext JS 学习(7) Ext.FormPanel 组件的使用第四式(CheckBox, Radio, HtmlEditor,DateField等组件)
- extJS提交form表单数据的方式: Ext.Ajax.request,form.submit,getEl().dom.submit()
- (12)ExtJS之Ext.form.field.Radio、Ext.form.field.Checkbox
- Ext.form.FormPanel表单提交
- (13)ExtJS之Ext.form.field.RadioGroup、Ext.form.field.CheckboxGroup
- 转载--Ext.form.formPanel 与服务器交互 初始化表单
- extjs 9 EXT的form表单ajax提交(默认提交方式)
- Extjs4循序渐进(三)——表单及表单控件详解一(表单布局和基础控件 Text,TextArea,Number,Checkbox,Radio,Date)
- Ext.form.FormPanel 组件的使用(CheckBox, Radio, HtmlEditor,DateField等组件)
- 登陆页面的form表单中存在radio时,鼠标点到radio时,回车提交快捷键功能消失的解决办法
- Ext.form.FormPanel表单相关(如何得到表单上面的值,如何去掉field前面的冒号)
- Extjs提交form表单的方式
- 【Extjs优化二】 Form表单提交通用
- EXTJS gridpanel中的checkbox列 根据数据库值 来初始化是否被选