ExtJS登录实践-优快云博客

距离上次写ext已经过去一个星期了,一个星期没学到什么,就整理一个登陆,郁闷死了

从BLOG的访问量知道EXT学习的人还真多.看来偶是退步了

上个星期做了登陆,可是到最后都是失败,一直没找到原因,在优快云,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.youkuaiyun.com/u/20080731/10/7babf54b-db2a-45b3-935d-a14eca0014b3.html

不写写是永远不会的,多写多写,看都很容易看懂,不过也很容易忘.