您的位置:首页 > Web前端 > JavaScript

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"/>'
                }]
            }





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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: