ExtJs学习篇---OA系统登录界面设计

今天在网上看到了一个案例，于是就跟着练习了下，也就当作这几天学习的一个应用吧！

部署图如下：

login.js

//Ext.BLANK_IMAGE_URL是空白图片的地址
Ext.BLANK_IMAGE_URL='image/blank.gif';
//登录页面的功能函数
var login = function(){Ext.QuickTips.init();//初始化工具提示，这样组件就能自动进行工具提示Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";//初始化传输是的编码//状态管理，这里擦用了cookie的状态管理方式，也就是一些状态的数据保存在cookie中Ext.state.Manager.setProvider(new Ext.state.CookieProvider());//实现具体的功能//采用FormPanel类作为form的表单的布局面板var form = new Ext.form.FormPanel({//所有子组件如果没有指定类型，则采用该类型：文本输入框defaultType:'textfield',//标签的对其方式：右对齐labelAlign:'right',//标签的宽度labelWidth:60,//表示该面板的位置region:'center',//取消默认的边框defaults:{boder:false},//items是指想该面板中插入一下组件，如：文本框、标签什么的items:[//fieldLabel,作为该字段的标签；name用来标识该输入框元素，提交时取值用{fieldLabel:'登录帐号',name:'user'},//帐号字段//对于密码而言，我们还要指定他的输入类型（inputType）{fieldLabel:'登录密码',name:'password',inputType:'password'},//密码字段{fieldLabel:'效  验  码',name:'checkcode'}],buttons:[{text:'登录'},{text:'取消'}]});//面板部分var panel = new Ext.Panel({//声明定义一个面板，用来布局登录页面renderTo:'loginpanel',//渲染（加载）到指定的loginpanel元素中layout:'border',//采用border样式布局width:525,height:290,defaults:{border:false},//容器中的每个子组件默认是右边框的items:[{region:"north",//顶部（北部）height:56,html:'<img src="data:image/head.gif"/>'},{region:"south",//底部（南部）height:56,html:'<img src="data:image/foot.gif"/>'},{region:"west",width:253,html:'<img src="data:image/left.gif"/>'},form]});Ext.get('loginpanel').setStyle('position', 'absolute').center(Ext.getBody());
};
Ext.onReady(login);//在Ext Js文件或Dom文档载入之后才运行login函数

login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OA系统登录例子</title>
<!-- 引入Ext Js的样式文件 -->
<link rel="stylesheet" type="text/css" href="extjs3.2.1/resources/css/ext-all.css">
<!-- 引入Ext Js的适配文件 -->
<script type="text/javascript" src="extjs3.2.1/adapter/ext/ext-base.js"></script>
<!-- 引入Ext Js的框架文件，该文件方便调试，在实际应用中直接引用ext-all.js文件 -->
<script type="text/javascript" src="extjs3.2.1/ext-all-debug.js"></script>
<!-- 引入登录处理的js文件 -->
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div id="loginpanel"></div>
</body>
</html>

Project Explorer部门的截图以及效果图：

由于文本框、标签与按钮之间的距离太宽了，按钮后面有背景色。对其样式进行了一些修改代码如下：

style:'background:#ffffff;padding:25px 35px 30px 16px;',

该代码是加入到login.js中的。

最终的效果图如下：

最终的效果去是出来了可是功能并没有实现，我在原有的代码基础上进行了点修改在login.js的效验码那儿快进行了点补充代码如下：

{xtype:'panel',layout:'column',items:[{columnWidth:.6,fieldLabel:'效  验  码',name:'checkcode'},{xtype:'panel',columnWidth:.4,html:'<img src="data:image/code.gif"/>'}]}

改成这样过后效验码是出来了，可是前面的文字标签却不见了。这是因为前面的fieldLabel失效了，form是不会解析非form布局中的子组件

{xtype:'panel',layout:'column',items:[{columnWidth:.6,layout:'form',boder:false,items:[{xtype:'textfield',anchor:'98%',fieldLabel:'效  验  码',name:'checkcode'}]},{xtype:'panel',columnWidth:.4,html:'<img src="data:image/code.gif"/>'}]}

这个效验码的效果并不是很好，这个只是初步设计嘛。可以理解，这儿我们暂时还是用的静态的图片代替的，在真正的开发中应该是动态的

ExtJs学习篇---OA系统登录界面设计相关推荐

Java微型博客系统——博客系统登录界面设计
登录界面设计初步设计一个登录界面,之后可能会有改动实现用户的登录和注册功能的页面文件分布步骤 0.导入依赖这里需要导入thymeleaf依赖,便于前后端的交互 <dependency& ...
java音乐登陆界面_第四篇——Spring音乐登录界面设计及实现(C#)
Spring音乐播放器,我们小组设计其启动时有一个登录界面,用户初次可以注册,输入用户名和密码,点击注册即将输入信息保存到register文本文件中:如果已有用户名,输入用户名和密码,点击登录,程序会 ...
linux 新用户界面登录,如何在Linux系统登录界面加入个性化提示信息
如何在Linux系统登录界面加入个性化提示信息 Linux字符界面看久了容易乏味,如果在登录时加点个性化显示看着也比较舒服,下面小编就给大家介绍下如何在Linux系统登录界面加入个性化提示信息,一起来 ...
Android之登录界面设计
Android之登录界面设计这篇文章主要讲述Android开发中常用的APP开发界面–登录界面的开发(由于博主是初学安卓,可能有些小伙伴会感到简陋,我会继续努力学习新知识的,大家一起加油). (1) ...
（附源码）springboot电商系统前端界面设计与浏览器兼容性研究毕业设计 231058
基于springboot电商系统前端界面设计摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除 ...
spring boot电商系统前端界面设计与浏览器兼容性研究毕业设计-附源码231058
摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除在外,随着网络技术的不断成熟,带动了电商系统前 ...
SoC学习篇—Linux 系统搭建
SoC学习篇-Linux 系统搭建一.制作.dtb与.rbf文件 1.编译硬件工程 2.文件制作二.启动操作系统内核 1.编译uboot 2.生成preloader-mkpimage.bin文件 ...
登录界面设计及功能实现
文章目录 1 登录界面设计 1.1 登录界面设计 1.2 登录界面设计要点 1 登录界面设计 1.1 登录界面设计界面效果如下: 1.2 登录界面设计要点我们需要先将窗体设置为无边框,然后再设置窗 ...
web登录界面设计_出色的Web界面设计的7条规则
web登录界面设计 When you work on a website or on the design of web pages, remember that their success is n ...

ExtJs学习篇---OA系统登录界面设计

今天在网上看到了一个案例，于是就跟着练习了下，也就当作这几天学习的一个应用吧！

login.js

login.html

Project Explorer部门的截图以及效果图：

由于文本框、标签与按钮之间的距离太宽了，按钮后面有背景色。对其样式进行了一些修改代码如下：

该代码是加入到login.js中的。

最终的效果图如下：

最终的效果去是出来了可是功能并没有实现，我在原有的代码基础上进行了点修改在login.js的效验码那儿快进行了点补充代码如下：

改成这样过后效验码是出来了，可是前面的文字标签却不见了。这是因为前面的fieldLabel失效了，form是不会解析非form布局中的子组件

这个效验码的效果并不是很好，这个只是初步设计嘛。可以理解，这儿我们暂时还是用的静态的图片代替的，在真正的开发中应该是动态的

ExtJs学习篇---OA系统登录界面设计相关推荐

最新文章

热门文章

ExtJs学习篇---OA系统登录界面设计

今天在网上看到了一个案例，于是就跟着练习了下，也就当作这几天学习的一个应用吧！

login.js

login.html

Project Explorer部门的截图以及效果图：

由于文本框、标签与按钮之间的距离太宽了，按钮后面有背景色。对其样式进行了一些修改代码如下：

该代码是加入到login.js中的。

最终的效果图如下：

最终的效果去是出来了可是功能并没有实现，我在原有 的代码基础上进行了点修改在login.js的效验码那儿快进行了点补充代码如下：

改成这样过后效验码是出来了，可是前面的文字标签却不见了。这是因为前面的fieldLabel失效了，form是不会解析非form布局中的子组件

这个效验码的效果并不是很好，这个只是初步设计嘛。可以理解，这儿我们暂时还是用的静态的图片代替的，在真正的开发中应该是动态的

ExtJs学习篇---OA系统登录界面设计相关推荐

最新文章

热门文章

最终的效果去是出来了可是功能并没有实现，我在原有的代码基础上进行了点修改在login.js的效验码那儿快进行了点补充代码如下：