今天在网上看到了一个案例,于是就跟着练习了下,也就当作这几天学习的一个应用吧!
部署图如下:
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"/>'
}]
}
这个效验码的效果并不是很好,这个只是初步设计嘛。可以理解,这儿我们暂时还是用的静态的图片代替的,在真正的开发中应该是动态的