第一次用ext来做web的东西，那就来一个经典的登陆验证吧。。
感觉用起来不省事啊，不过效果还算不错。。
login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="Ext/ext-base.js"> </script>
<script type="text/javascript" src="Ext/ext-all.js"> </script>
</head>
<body>
<script>
Ext.onReady(function(){
//使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//定义表单
var simple = new Ext.FormPanel({
labelWidth: 75,
baseCls: 'x-plain',
defaults: {width: 150},
defaultType: 'textfield',//默认字段类型
//定义表单元素
items: [{
fieldLabel: '帐户',
name: 'name',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank:false,//不允许为空
blankText:'帐户不能为空'//错误提示内容
},{
inputType:'password',
fieldLabel: '密码',
//anchor:'95%',
name: 'pws',
allowBlank:false,
blankText:'密码不能为空'
}
],
buttons: [{
text: '登陆',
type: 'submit',
//定义表单提交事件
handler:function(){
if(simple.form.isValid()){//验证合法后使用加载进度条
/*
Ext.MessageBox.show({
title: '请稍等',
msg: '正在加载...',
progressText: '',
width:300,
progress:true,
closable:false,
animEl: 'loding'
});
//控制进度速度
var f = function(v){
return function(){
var i = v/11;
Ext.MessageBox.updateProgress(i, '');
};
};
for(var i = 1; i < 13; i++){
setTimeout(f(i), i*150);
}
*/
//提交到服务器操作
simple.form.doAction('submit',{
url:'check.jsp',//文件路径
method:'post',//提交方法post或get
params:'',
//提交成功的回调函数
success:function(form,action){
if (action.result.msg=='ok') {
document.location='index.html';
} else {
Ext.Msg.alert('登陆错误',action.result.msg);
}
},
//提交失败的回调函数
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
}
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表单
}]
});
//定义窗体
win = new Ext.Window({
id:'win',
title:'用户登陆',
layout:'fit', //之前提到的布局方式fit，自适应布局
width:300,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,//禁止最大化
closeAction:'close',
closable:false,//禁止关闭
collapsible:true,//可折叠
plain: true,
buttonAlign:'center',
items:simple//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体
});
</script>
</body>
</html>
[align=left][/align]
相应的jsp文件 check.jsp
<%@ page contentType="text/html;charset=GBK"%>
<%
System.out.println("test.....");
String name= request.getParameter("name");
String pws = request.getParameter("pws");
System.out.println(name +":"+pws);
if("sun".equals(name) && "123".equals(pws)){
response.getWriter().print("{success:true,msg:'ok'}");
}else{
response.getWriter().print("{success:true,msg:'false'}");
}
%>
ext的配置之类的废话就不说了。。。
分享到：
相关推荐
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2...
为一个表单填充或提交数据 69 让我们开始吧 69 读取我们的数据 71 EXT中的继承 71 补充资料 73 Ext 2 概述 73 组件模型 Component Model 74 容器模型Container Model 78 布局 Layouts 80 Grid 82 XTemplate 83 ...
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...
第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用...
将数据加入到模板中 62 下一步 63 学习利用模板（Templates）的格式...入门 67 表单体 67 创建表单字段 67 完成表单 68 下一步 69 为一个表单填充或提交数据 69 让我们开始吧 69 读取我们的...
为一个表单填充或提交数据 69 让我们开始吧 69 读取我们的数据 71 EXT中的继承 71 补充资料 73 Ext 2 概述 73 组件模型 Component Model 74 容器模型Container Model 78 布局 Layouts 80 Grid 82 XTemplate 83 ...
将数据加入到模板中 62 下一步 63 学习利用模板（Templates）的格式...入门 67 表单体 67 创建表单字段 67 完成表单 68 下一步 69 为一个表单填充或提交数据 69 让我们开始吧 69 读取我们的...
12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 ...
12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 ...
ExtJS的前景是非常好的，现在的QQ2009的登录界面以及使用，迅雷最新版的主界面，都能够找到这个框架的踪迹。web QQ也是有一个技术版本是使用这种框架的，所以，可以看出，extjs的应用，是越来越广泛了，extjs的前景...
入门学习Linux常用必会60个命令实例详解 Linux必学的60个命令 Linux提供了大量的命令，利用它可以有效地完成大量的工作，如磁盘操作、文件存取、目录操作、进程管理、文件权限设定等。所以，在Linux系统上工作离不...