ExtJS用户登录界面

y1d2y3xyz

浏览: 257051 次
性别:
来自: 深圳

最近访客更多访客>>

eric_gcm

chenliqiang

liujun.1980

zhen000000

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Extjs

Extjs PHP JavaScript prototype 数据结构

首先：鉴于目前自己在学习ExtJS，也把自己学习中的一些东西给大家分享，我看网上很多朋友都很关注Extjs的，我自己也刚开始学习没多久！把《EXTJS WEB应用程序开发指南》从头到尾也看了俩遍，这本书讲得不算深入，但对于API讲解得比较多，在某种程度上讲可以看作这是中文版的API,如果是还没有入门的朋友可以去买来看看，我看完这本书的感觉就是知道EXT的基本大概结构，说到实际能弄出个什么东西来还真不好讲！只能说知道怎样去查API文档了！至于想进一步的深入或者提高的话我建议把官方的例子全部自己做一次，而且可以看一下《JavaScript凌厉开发--Ext详解与实践》相对来讲这本更适合进阶或者说是提高，跟实际结合得更紧，如果完全没有EXT基础就看这本的话，一开始肯定有点吃力，从这本书中我其实还是能看到作者的用心！也不像某些网友说的那么不好！
其次：在这些教程中我都会写一些自己原创的东西给大家分享，如果大家转载务必注明出处！
这部分教程我会先从界面方面讲，后面会讲数据交互方面，至于数据交互方面我会从PHP和J2EE方面去讲！对PHP和J2EE我了解的也只是皮毛！
最后：至于代码方面我会完全的让代码完整，保证需要的人COPY过去就能跑起来，布局排版方面我也会做到完善，因为自己也是做美工方面！希望有更多的人支持！

下面让我们从一个简单的登陆的界面中看看EXT的效果！


/*index.php 代码*/

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<style type="text/css">
body,html{height:100%;margin:0px;padding:0px;}
#outer{height:100%;overflow:hidden;position:relative;width:100%;}
#outer[id] {display:table;position:static;}
#middle {position:absolute;top:50%;left:50%;}
#middle[id]{display:table-cell;vertical-align:middle;position:static;}
#inner{position:relative;top:-50%;width:310px;left:50% !important;left:-155px;}
#container{width:310px;height:190px;margin-left:auto;margin-right:auto;}
</style>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget="qtip";
	var loginform = new Ext.form.FormPanel({
		renderTo:'container',
		title:'会员登陆',
		labelSeparator:":",
		collapsible :true,
		width:300,
		height:160,
		id:'login',
		labelWidth: 80,
		bodyStyle: 'padding:5px 5px 0 0',
		border: false,
		name:'login',
		frame:true,
		defaults:{width:178,xtype:'textfield'},
		items:[
			new Ext.form.TextField({
			fram:true,
			fieldLabel:"用户名",
			name:'userName',
			allowBlank:false,
			blankText:'用户名不能为空'
		}),{
			fieldLabel:"密码",
			name:'password',
			allowBlank:false,
			inputType:'password',
			blankText:'密码不能为空'
		},{
			name: 'vcode',
			id: 'vcode',
			fieldLabel: '验证码',
			maxLength: 4,
			width: 80,
			allowBlank: false,
			blankText: '验证码不能为空!'
					}],
		keys:{
			key: 13,
			fn:login
		},
		buttons:[{
			text:'提 交',
			handler:login
		},{
			text:'重置',handler:function(){
				loginform.form.reset();
			}
		}]
	});
	function login(){

	}
	
})
</script>
</head>
<body>
<!-- div实现水平和垂直居中IE7的效果是正常的，FF3.0在水平居中上有一点差距，弄不好 -->
<div id="outer">
	<div id="middle">
		<div id="inner">
		<div id="container">
					
		</div>
		</div>
	</div>
</div> 
</body>
</html>

查看图片附件

分享到：

Ext表单组件实现用户注册 | SQL整理十一

2009-07-27 15:57
浏览 11322
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论