ExtJs学习篇---OA系统登录界面设计
2013-09-27 16:02
721 查看
今天在网上看到了一个案例,于是就跟着练习了下,也就当作这几天学习的一个应用吧!
部署图如下: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="image/head.gif"/>' },{ region:"south",//底部(南部) height:56, html:'<img src="image/foot.gif"/>' },{ region:"west", width:253, html:'<img src="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="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="image/code.gif"/>' }] }
这个效验码的效果并不是很好,这个只是初步设计嘛。可以理解,这儿我们暂时还是用的静态的图片代替的,在真正的开发中应该是动态的
相关文章推荐
- ExtJs学习篇---OA系统登录界面设计之验证码
- ExtJs学习篇---OA系统登录界面设计之登录功能实现
- ExtJs学习篇---OA系统主窗体设计
- 不同风格的网页登录界面设计学习
- JSP系统开发学习之四关于用户登录界面的补充——通过request页面传值&wel.jsp的MVC的实现
- 一个Web系统OA界面设计和开发
- Android客户端之“微服私访”App的系统学习(二)TextInputLayout实现登录界面和LitePal初始化本地数据库
- [转]一个Web系统OA界面设计和开发
- 不同风格的网页登录界面设计学习
- 一个Web系统OA界面设计和开发
- 一个Web系统OA界面设计和开发
- OA系统权限管理设计方案学习
- Web系统OA界面设计和开发,OA设计开发指南,OA界面设计,OA系统开发
- 简单医疗系统设计(一)登录界面的制作
- c# 登录界面设计与框架基础搭建雏形--(学生管理系统)
- 20135304刘世鹏——信息安全系统设计基础第五周学习总结
- 学习Lemon OA系统:一、流程定义
- C#的用户登录和界面嵌入设计
- 网上图书商城项目学习笔记-002登录页面的静态设计