`
linpyi
  • 浏览: 62961 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext学习2

    博客分类:
  • ext
阅读更多

距离上次写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学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...

    gwtext学习三部曲

    《gwtext学习三部曲》是一份专为GWT初学者设计的教程资源,它涵盖了gwtext和GWT Ext的相关知识。gwtext是Google Web Toolkit (GWT) 的一个扩展库,提供了丰富的用户界面组件和样式,使得在GWT平台上构建复杂的Web...

    不错ext学习网站~~~~~

    在探讨“不错ext学习网站”这一主题时,我们首先需要明确“ext”在这里指的是什么。在IT领域,“ext”通常与Linux文件系统有关,比如ext2、ext3、ext4等,但根据提供的链接和上下文,这里的“ext”更可能指的是Ext ...

    ext学习资料ext学习资料

    Ext Js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。...在本文中,我们将深入探讨Ext Js的核心组件,...通过深入学习和实践,开发者可以充分利用这个框架的强大功能,创造出令人印象深刻的Web应用。

    Ext学习笔记

    Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址

    EXT学习小例子

    在这个名为"EXT学习小例子"的项目中,我们将深入探讨EXTJS如何实现数据的增加、删除和修改功能。 EXTJS的核心是其组件系统,它提供了各种UI组件,如表格、表单、面板、树形视图等,这些组件可以方便地组合在一起...

    EXT3.3学习文档

    EXT3.3学习文档主要涉及的是Linux操作系统中的EXT3文件系统的一个特定版本——EXT3.3。EXT3,全称为“Third Extended File System”,是Linux系统中广泛使用的日志文件系统之一,尤其在早期的发行版中非常常见。EXT...

    ext学习手册(中英文版)

    "EXT学习手册"是针对EXT库的学习资源,分为中英文两个版本,主要涵盖了EXT的常用方法、属性以及整个EXT框架的介绍。对于初学者和有经验的开发者来说,这都是一个非常有价值的参考资料。 CHM(Compiled HTML Help)...

    ext学习文档

    ### EXT学习文档知识点详解 #### 1. EXT简介 EXT是一个功能强大的JavaScript库,用于构建交互式的Web应用程序。它提供了一系列工具和API,使得开发者能够更容易地创建动态且丰富的用户界面。EXT支持多种浏览器,并...

    EXT学习心得,ext

    ### EXT学习心得与关键知识点详解 #### 布局Center的重要性 在EXT框架中,`layout: 'center'`是一个非常关键的配置属性,尤其是在创建面板(Panel)时。如果一个面板没有设置中心布局(center),它可能不会按预期...

    Ext学习文档,可以帮助你快速学习Ext

    可以帮助刚开始学习Ext的朋友,快速的掌握基本的方法

    Gwt-ext学习笔记

    在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...

    Ext JS学习资料

    ### Ext JS 学习资料详解 #### 一、Ext JS 概述 Ext JS 是一款基于 JavaScript 的前端框架,主要用于构建复杂的企业级 Web 应用程序。它提供了一套丰富的 UI 组件库以及一系列用于数据处理、应用架构设计等功能...

    有利于ext学习的小程序

    "有利于EXT学习的小程序"是一个专门为EXT初学者设计的项目,它包含了一个使用EXT框架开发的应用实例,可以帮助学习者更好地理解和掌握EXT的各种功能和用法。项目中可能包含了EXT的基本组件,如表格(Grid)、面板...

    Ext 中文文档,Ext+3.0.CHM,Ext学习文档

    Ext 最新文档下载,Ext中文文档下载,Ext+3.0.CHM,Ext学习文档,实用,且实惠咯...

    EXT学习笔记-项目应用实践

    这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...

    ext+ssh2学习

    ext+ssh2学习,基于ssh的增、删、改、查,初步掌握ExtJs学习

    Ext学习入门及资料

    收集的Ext资料. 博文链接:https://dayone.iteye.com/blog/238610

Global site tag (gtag.js) - Google Analytics