ExtJs 之简单 Form提交
<%@ page language="java" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/js/ext/resources/css/ext-all.css" />
<script type="text/javascript"
src="<%=basePath%>/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function()
{
var form1 = new Ext.form.FormPanel({
renderTo:"loginForm", //要渲染的div
labelWidth: 75, // label settings here cascade unless overridden
method:'POST',
title: '登录窗口',
bodyStyle:'padding:5px 5px 0',
width: 300,
defaults: {width: 200},
defaultType: 'textfield',
//实现非AJAX提交表单一定要加下面的两行！
onSubmit: Ext.emptyFn,
submit: function()
{
this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址
this.getEl().dom.submit();
},
items: [{
fieldLabel: '用户名',
id: 'username',
name: 'name',
allowBlank:false,
blankText : "用户名不能为空",
width:150
},{
fieldLabel: '密码',
blankText : "密码不能为空",
id: 'password',
name: 'pwd',
allowBlank:false,
minLength : 6,
width:150,
inputType:'password' //类型为password
}
],
buttons: [{
text: '登录',
type:'button',
id:'login',
handler: function()
{
//表单验证通过
if (form1.form.isValid())
{
//提交form
form1.form.submit();
}
}
},{
text: '重置',
type:'reset',
id:'clear',
handler: function()
{
form1.form.reset();
}
}
]
});
//将form添加window中
var window = new Ext.Window({
title: '用户登录',
width: 300,
height:180,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form1
});
//显示window
window.show();
});
</script>
</head>
<body>
<div id="loginForm"></div>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/js/ext/resources/css/ext-all.css" />
<script type="text/javascript"
src="<%=basePath%>/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function()
{
var form1 = new Ext.form.FormPanel({
renderTo:"loginForm", //要渲染的div
labelWidth: 75, // label settings here cascade unless overridden
method:'POST',
title: '登录窗口',
bodyStyle:'padding:5px 5px 0',
width: 300,
defaults: {width: 200},
defaultType: 'textfield',
//实现非AJAX提交表单一定要加下面的两行！
onSubmit: Ext.emptyFn,
submit: function()
{
this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址
this.getEl().dom.submit();
},
items: [{
fieldLabel: '用户名',
id: 'username',
name: 'name',
allowBlank:false,
blankText : "用户名不能为空",
width:150
},{
fieldLabel: '密码',
blankText : "密码不能为空",
id: 'password',
name: 'pwd',
allowBlank:false,
minLength : 6,
width:150,
inputType:'password' //类型为password
}
],
buttons: [{
text: '登录',
type:'button',
id:'login',
handler: function()
{
//表单验证通过
if (form1.form.isValid())
{
//提交form
form1.form.submit();
}
}
},{
text: '重置',
type:'reset',
id:'clear',
handler: function()
{
form1.form.reset();
}
}
]
});
//将form添加window中
var window = new Ext.Window({
title: '用户登录',
width: 300,
height:180,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form1
});
//显示window
window.show();
});
</script>
</head>
<body>
<div id="loginForm"></div>
</body>
</html>