`
lingyibin
  • 浏览: 196397 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Extjs复习笔记(八)--登陆框

阅读更多

之前有一篇博客展示了一个图书管理系统,接下来的几篇博客将会解析其中的一些重点。

这个系统是由五个框架做成的:Extjs + DWR + Spring + Struts + Hibernate 。后面三个,SSH三大框架想必大家都比较熟了,这里就不再讲了。之后的几篇Ext博客,重点是讲前两个。


 

var loginPanel =
	new Ext.form.FormPanel({
		title:"用户登录",
		id:"loginpanel",
		frame:true, //没有这句的话 中间部分的背景与周围不相称
		width:310,
		height:210,
		renderTo:"login_field", //绑定到页面中的一个div上
		items:[
			{
               xtype:"fieldset",
               title:"登录框",
               collapsible:true, //出现了下图中“登陆框”这几个字左边的那个用于收缩的小三角形按钮
               autoHeight:true,//自动调整高度
               width:300,
               defaults:{width:150},
               defaultType:"textfield",
	           style:"text-align:left", //让文字左对齐
               items:[
                  {
                    fieldLabel:"用户帐号",
                    name:"name",
                    id:"name",
                    allowBlank:false, //有了这句话,当用户此textfield留空时会画红线并不让提交
                    blankText:"用户名不能为空!", //当上一句情况出现时进行提醒文字
                    anchor:"90%" //此属性一般用于FormPanel中,表示占了这个form宽度的百分之几
                  },
                  {
                    fieldLabel:"用户密码",
                    inputType:"password", //输入类型为密码
                    name:"psw",
                    id:"psw",
                    allowBlank:false,
                    blankText:"用户密码不能为空!",
                    anchor:"90%"
                  },
                  {
                   fieldLabel:"用户身份",
                   xtype:"combo",
                   id:"status_id",
                   width:145,
                   editable:false, //不可编辑
                   store:[['0','管理员'],['1','读者']],//数据源是一个数组
                   hiddenName:'status',//这里千万不要与id同名,不然服务器接收的值异常。
				   emptyText:"请选择登录身份",
                   allowBlank:false,
                   blankText:"用身份不能为空,请选择!",
                   triggerAction:"all"//每次选中一项,之后再选也会将所有列表显示出来。
                  }
               ]
            }
		],
		buttons:[
            {
            xtype:"button",
            text : '登录',
            cls:"x-btn-text-icon", //换一个图标,x-btn-text-icon的定义很可能在css里面
			clearCls:'allow-float',//允许浮动
			itemCls:'float-left',//向左浮动,类似于css中的float:left
	        handler : function() {
	            if (loginPanel.form.isValid()) { //表单合法
	                    loginPanel.form.submit( {
	                        url : 'login.do', //这个表单数据发送的地址,这里交给struts去处理
	                        success : function(from, action) { //当服务器接收并处理成功时触发的事件
	                          Ext.get('loginpanel').remove(); //去掉登陆框,避免内存的浪费
	                          window.location.href='pages_share/main.html';//地址跳转
	                        },
	                        failure : function(form, action) { //当服务器处理失败时触发的事件
	                           Ext.MessageBox.show({//记住这种写法,很规范!
			                    	title:"登录失败",
			                    	msg:"登录失败!请认真检查您的姓名密码及身份。",
			                    	icon:Ext.MessageBox.ERROR, 
			                    	buttons:{"ok":"确定"}
			                    });
	                        },
	                        waitMsg : '正在登录,请耐心等候...'  //加载时显示的信息,这将以模态的方式显示,效果不错!
	                    });
	                   // dialog.hide();
                } else { //提交信息本地验证没通过
                    Ext.MessageBox.show({
                    	title:"警告",
                    	msg:"请填写完登录信息再提交!",
                    	icon:Ext.MessageBox.WARNING,
                    	buttons:{"ok":"确定"}
                    });
                }
	        }
          },
          {
            xtype:"button",
            text : '重置',
            cls:"x-btn-text-icon",
            //icon:"images/reset_btn.gif",
			clearCls:'allow-float',//允许浮动
			itemCls:'float-left',//向左浮动
	        handler : function() {
	            loginPanel.form.reset(); //重置该form里面的所有输入框
	        }
          }
		]
	});

 不多解释,每一个新的内容后面我都加了注释。。。

  • 大小: 7 KB
  • 大小: 6.2 KB
0
1
分享到:
评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    Extjs复习笔记(十八)-- TreePanel

    在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    Extjs复习笔记(十一)--换肤

    在EXTJS框架中,换肤是一项重要的功能,它允许开发者根据用户需求或品牌风格改变应用程序的外观和感觉。本文将深入探讨EXTJS的换肤机制,以及如何利用提供的主题CSS文件实现这一特性。 EXTJS是一个强大的JavaScript...

    Extjs复习笔记(二十)-- tree和grid结合

    在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...

    extjs2----关于extjs 的使用,操作

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容...

    Extjs复习笔记(十七)-- 给grid里面的内容分组

    本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组,帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类,这样可以更清晰地组织和展示数据。这在处理大量数据时...

    EXTJS开发包ext-3.2.0

    EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0

    Extjs复习笔记(十五)-- JsonReader

    在“Extjs复习笔记(十五)-- JsonReader”这篇博文中,博主探讨了ExtJS中的JsonReader,这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包(Ext.data)的一部分,用于从服务器获取JSON格式的数据,...

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    ExtJS 2.2下载--Ajax框架

    ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多 彩的web应用程序界面。主要是企业信息化软件,网站后台等。ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写 的,主要用于...

    ssh+extjs开发crud--经典

    ### SSH+ExtJS开发CRUD功能详解:从理论到实践 #### 核心知识点概览 在《ssh+extjs开发crud--经典》这一主题下,我们深入探讨如何结合SSH框架(即Struts2、Spring、Hibernate)与ExtJS前端框架来实现CRUD操作(即...

    extJs例子-------

    ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子

    ExtJS运行框架spket-1.6.23+ext-6.2.0

    ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计。它提供了丰富的组件和API,使得开发者可以创建复杂的、数据驱动的用户界面。在本主题中,我们将深入探讨如何配置ExtJS运行环境,以及与之相关的...

    extjs-v7.0-cmd

    extjs-cmd 脚手架安装包2 extjs-cmd 脚手架安装包3 extjs-cmd 脚手架安装包4

Global site tag (gtag.js) - Google Analytics