效果图:
Ext.onReady(function(){ var winLogin = Ext.create("Ext.window.Window",{ width : 400 , height : 270 , modal : true , // 窗口弹出,其他地方不可操作 title : ' 登陆 ' , collapsible : true , // 收缩按钮 closable : false , // 是否显示关闭窗口按钮 iconCls : 'key',// cog , database_gear resizable : false , // 窗体是否可以拉伸 constrain:true, items : [{ xtype:'panel', width:'100%', height:100, padding:'1px', html:"<img src='css/icons/1_log.png' height='100%' width='100%'/>" },{ xtype:'form', width:'100%', id:'myform', height:130, //frame: true, padding:'1px', buttonAlign : 'center', items:[{ xtype:'textfield', id:'username', name:'username', fieldCls:'login_account', fieldLabel:'账 号 ', width:300, margin:'10,10,10,10', labelAlign : 'right' },{ xtype:"textfield", id:'password', name:'password', fieldCls:'login_password', width:300, fieldLabel:'密 码 ', margin:'10,10,10,10', labelAlign : 'right', inputType:'password' },{ xtype:'panel', width:'100%', bodyStyle: 'border:0', html:"<p align='right'>版权所有:银川赛瑞格计算机科技有限公司</p>" }], buttons : [{ text:'登陆', layout:'fit', type:'submit', handler:function(){ var _username = Ext.getCmp('username').getValue(); var _password = Ext.getCmp('password').getValue(); if(_username==""){ Ext.Msg.alert("提示","用户名不能为空,请输入用户名"); } else if(_password==""){ Ext.Msg.alert("提示","密码不能为空,请输入用户名"); } else { // 掩饰层 (遮罩效果) var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"正在登陆,请稍后..."}); myMask.show(); Ext.Ajax.request({ url:'login.action', method:'POST', success:function(response,opts){ var sf= Ext.JSON.decode(response.responseText); if(sf.success){ myMask.hide(); Ext.Msg.alert("提示","登陆成功!!!"); window.location.href="toIndex.action"; } else { myMask.hide(); Ext.Msg.alert("提示","登陆失败..."); } }, failure:function(response,opts){ myMask.hide(); Ext.Msg.alert("提示","登陆失败"); }, params:{ username:_username, password:_password } }) } } },{ text:'重置', handler:function(){ Ext.getCmp('myform').form.reset(); } }] }], renderTo:Ext.getBody() }); winLogin.show(); })
相关推荐
[02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS4.0的新特性.002.zip (50.00M)[02]EXTJS4.0的新特性.001.zip 第三讲:extjs4.0数据模型--Model(附件较大做了分包压缩大家只要下载2个包运行001就ok了) [03]EXTJS...
Extjs 4.0中文版API
EXTJS4.0提供了一系列预定义的组件,如表格、表单、树形结构、图表等,满足各种界面需求。同时,其布局管理器支持多种布局模式,如Fit布局、Form布局、Border布局等,可以灵活地组织和调整组件的位置和大小。 在...
在《ExtJs4.0 手册中文版》中,你可以找到关于ExtJS 4.0的全面介绍和详细指南。这个手册涵盖了框架的基础知识,如MVC架构、组件系统、数据绑定以及事件处理机制。此外,它还深入讲解了如何使用各种组件,如GridPanel...
extjs4.0开发人员以及学习可以下载参考
### EXTJS 4.0 视频教程 30集 关键知识点解析 #### 一、EXTJS 4.0 概述与安装配置 **1.1 EXTJS 4.0简介** EXTJS 4.0是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。它提供了一套丰富的UI组件...
综上所述,ExtJS 4.0官方版本是构建复杂企业级Web应用的理想选择,它提供的强大功能和易用性,使得开发者能够快速地构建出功能丰富、交互性强的前端界面。在ext-4.0.0这个压缩包中,包含了完整的框架文件和资源,...
### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...
EXTJS 4.0 是一个面向开发 RIA 的 AJAX 应用,是一个用 JavaScript 写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 AJAX 框架。它能够帮助我们在页面上快速而简单构建各种各样的控件,简化我们自己去...
ExtJs4.0入门教程,详细介绍ExtJs4.0。
**Extjs4.0** 是一款强大的企业级前端框架,它可以帮助开发者快速构建复杂的用户界面,并且提供了丰富的组件和功能。对于初学者来说,理解其核心概念和基础操作是非常重要的。 ##### 获取Extjs4.0 - **官方网站**:...
EXTJS4.0是一款强大的JavaScript框架,用于构建富客户端Web应用程序。这个视频教程配套代码主要涉及EXTJS4.0中的action类,这是EXTJS中处理服务器端交互的关键部分。在EXTJS中,action类通常指的是Ext.Ajax或Ext....
ExtJS4.0开发笔记
ExtJS 4.0 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一系列强大的组件,包括日期和时间选择器,使得用户界面更加友好和交互。在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架...
一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载
ExtJS 4.0中文学习手册、入门详解 本文为 ExtJS 4.0 的中文学习手册,旨在为初学者提供一个详细的入门指南。本手册涵盖了 ExtJS 4.0 的基础知识、环境搭建、基本使用方法等方面的内容。 1. ExtJS 4.0 的基础知识 ...
【描述】:“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目”描述了一个完整的系统解决方案,它不仅包括了后端服务器逻辑,还涵盖了前端用户界面的设计。由于采用的是Extjs4.0,所以系统的界面应该...
最新Extjs4.0 所有文件,含案例,帮助文档,源代码
可二次开发Extjs4.0通用后台管理系统源码完整大型项目。数据库在项目里面的一个sql文件里面 1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高...
标题提到的是ExtJS的4.0版本,这是一个重要的里程碑,因为它引入了许多新功能和改进,与之前的2.0和3.0版本有显著区别。 在ExtJS 4.0中,最显著的变化之一是其模型-视图-控制器(MVC)架构的增强。这个版本提供了更...