距离上次写ext已经过去一个星期了,一个星期没学到什么,就整理一个登陆,郁闷死了
从BLOG的访问量知道EXT学习的人还真多.看来偶是退步了
上个星期做了登陆,可是到最后都是失败,一直没找到原因,在CSDN,javaeye发了很多的帖,都没有得到想要的答案,最后一位
大哥点醒了我,原来是提交的URL出问题了,好久没写servlet竟然连servlet的提交代码都错,
正题:
这段时间看了一些关于ext的代码,也写了一些代码,发现我开始学习ext的目标错了
最开始想学EXT是因为感觉他的AJAX强大才学的,写着写着,他真正的强大是JS和CSS,现在写的代码完全不用服务器,直接用
HTML写,写写效果,不过EXT真正值的学习的地方应该是他的JS代码库,看看人家的JS是怎么写的炉火纯青的,EXT只是一个工
学会JS后,你可以自己写自己喜欢的效果,而且可以摆脱EXT的庞大的代码库,简化自己的WEB项目(有很多高手都很在意他的
HTML页的大小),
不说废话
要想学人家写的东西,就必须先会了解别人的东西怎么写法
以上是心得
登陆代码(网上找了很多)
首先是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="../scripts/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/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:'密码不能为空'//可限制多种类型,具体参照api文档
}
],
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:'/extDemo/DemoLogin',//文件路径
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:false,//true则主体背景透明,false则主体有小差别的背景色,默认为false
// frame:true,
bodyStyle:'padding:5px;',
maximizable:false,//禁止最大化
closeAction:'close',//枚举值为:close(默认值),当点击关闭后,关闭window窗口 hide,关闭后,只是hidden窗口
closable:false,//禁止关闭
collapsible:true,//可折叠
draggable:true,//则可拖动,但需要你提供操作过程,默认为false
titleCollapse:true,//设为true,则点击标题栏的任何地方都能收缩,默认为false.
autoScroll:false,//设为true则内容溢出的时候产生滚动条,默认为false
plain: true,
buttonAlign:'center',
items:simple//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体
});
</script>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>extDemo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>DemoTest</display-name>
<servlet-name>DemoTest</servlet-name>
<servlet-class>com.linpyi.test.DemoTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DemoTest</servlet-name>
<url-pattern>/DemoTest</url-pattern>
</servlet-mapping>
<servlet>
<description></description>
<display-name>DemoLogin</display-name>
<servlet-name>DemoLogin</servlet-name>
<servlet-class>com.linpyi.test.DemoLogin</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DemoLogin</servlet-name>
<url-pattern>/DemoLogin</url-pattern>
</servlet-mapping>
</web-app>
DemoLogin.java
String name = request.getParameter("name");
String pwd = request.getParameter("pws");
System.out.println("name=="+name);
System.out.println("pwd=="+pwd);
if(name.equals("admin")&&pwd.equals("pwd")){
System.out.println("OK");
response.setContentType("text/json; charset=utf-8");
response.getWriter().write("{success:true,msg:\'ok\'}");
}else{
response.setContentType("text/html; charset=utf-8");
response.getWriter().write("{success:true,msg:\'密码错误\'}");
}
其实就这么多,简简单单
当然我被一个问题困了很久,具体
http://topic.csdn.net/u/20080731/10/7babf54b-db2a-45b3-935d-a14eca0014b3.html
不写写是永远不会的,多写多写,看都很容易看懂,不过也很容易忘.
分享到:
相关推荐
这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...
《gwtext学习三部曲》是一份专为GWT初学者设计的教程资源,它涵盖了gwtext和GWT Ext的相关知识。gwtext是Google Web Toolkit (GWT) 的一个扩展库,提供了丰富的用户界面组件和样式,使得在GWT平台上构建复杂的Web...
在探讨“不错ext学习网站”这一主题时,我们首先需要明确“ext”在这里指的是什么。在IT领域,“ext”通常与Linux文件系统有关,比如ext2、ext3、ext4等,但根据提供的链接和上下文,这里的“ext”更可能指的是Ext ...
Ext Js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。...在本文中,我们将深入探讨Ext Js的核心组件,...通过深入学习和实践,开发者可以充分利用这个框架的强大功能,创造出令人印象深刻的Web应用。
Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址
在这个名为"EXT学习小例子"的项目中,我们将深入探讨EXTJS如何实现数据的增加、删除和修改功能。 EXTJS的核心是其组件系统,它提供了各种UI组件,如表格、表单、面板、树形视图等,这些组件可以方便地组合在一起...
EXT3.3学习文档主要涉及的是Linux操作系统中的EXT3文件系统的一个特定版本——EXT3.3。EXT3,全称为“Third Extended File System”,是Linux系统中广泛使用的日志文件系统之一,尤其在早期的发行版中非常常见。EXT...
### Ext JS 学习文档详解 #### 极致体验与技术背景 Ext JS,作为一套卓越的 AJAX 控件集合,自问世以来便以其强大的功能、优雅的界面设计赢得了广泛赞誉。它不仅提供了一系列丰富的 UI 组件,还拥有高度可定制性,...
"EXT学习手册"是针对EXT库的学习资源,分为中英文两个版本,主要涵盖了EXT的常用方法、属性以及整个EXT框架的介绍。对于初学者和有经验的开发者来说,这都是一个非常有价值的参考资料。 CHM(Compiled HTML Help)...
### EXT学习文档知识点详解 #### 1. EXT简介 EXT是一个功能强大的JavaScript库,用于构建交互式的Web应用程序。它提供了一系列工具和API,使得开发者能够更容易地创建动态且丰富的用户界面。EXT支持多种浏览器,并...
### EXT学习心得与关键知识点详解 #### 布局Center的重要性 在EXT框架中,`layout: 'center'`是一个非常关键的配置属性,尤其是在创建面板(Panel)时。如果一个面板没有设置中心布局(center),它可能不会按预期...
可以帮助刚开始学习Ext的朋友,快速的掌握基本的方法
在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...
### Ext JS 学习资料详解 #### 一、Ext JS 概述 Ext JS 是一款基于 JavaScript 的前端框架,主要用于构建复杂的企业级 Web 应用程序。它提供了一套丰富的 UI 组件库以及一系列用于数据处理、应用架构设计等功能...
"有利于EXT学习的小程序"是一个专门为EXT初学者设计的项目,它包含了一个使用EXT框架开发的应用实例,可以帮助学习者更好地理解和掌握EXT的各种功能和用法。项目中可能包含了EXT的基本组件,如表格(Grid)、面板...
Ext 最新文档下载,Ext中文文档下载,Ext+3.0.CHM,Ext学习文档,实用,且实惠咯...
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...
ext+ssh2学习,基于ssh的增、删、改、查,初步掌握ExtJs学习
收集的Ext资料. 博文链接:https://dayone.iteye.com/blog/238610