您的位置：首页 > 理论基础 > 计算机网络

栎洋科技超越网络室Cisco CCNA、Oracle OCP、 Linux RHCE暑假集训班热招中！

2010-06-07 19:05 337 查看

loginWindow.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆窗口</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../EXTJS/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
var _window = new Ext.Window({
title:"登 陆",          //标题
frame:true,            	//样式,边为圆角
width:260,             	//宽度
height:130,            	//高度
layout:"form",         	//布局
labelWidth:45,         	//标签宽度
//True 表示为显示 'close' 的工具按钮可让用户关闭window, false表示为隐藏按钮,并不允许关闭window(默认为 true).
//					closable:false,
//重定义关闭操作动作,原关闭会执行hide close两个操作
closeAction:"hide",
//True 表示为强制渲染窗的背景为透明的背景(默认为 false)
plain:true,
//True 表示为允许用户从窗口的四边和四角改变window的大小(默认为 true).
resizable:false,
//制定body元素的CSS样式,padding:5px意思为组件与顶部和左边都间距5PX
bodyStyle:"padding:5px",
//指定items数组的默认属性
defaults:{xtype:"textfield" , width:180},
//事件对列,用数组表示,键为事件名,值为订阅事件函数
listeners:{
"show":function(){
alert("显现窗口");
},
//hide事件为隐藏窗口
"hide":function(){
alert("隐藏窗口");
},
//close事件为在DOM树中删除窗口
"close":function(){
alert("关闭窗口");
}
},
//指定包含面板中的组件的配置数组
items:[{
fieldLabel:"账号"
},{
fieldLabel:"密码"
}],
//在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center' (默认为 'right').
buttonAlign:"center",
//指定包含面板中的按纽的配置数组
buttons:[{
text:"确  定"
},{
text:"取  消",
//给按钮添加一个事件,handle为默认事件,按钮的默认事件为click
handler:function(){
_window.hide();
}
}]
});
/*
window对象需要Show方法来运行(使得窗口显现)
panel使用render方法或使用renderTo这个属性运行
*/
_window.show();
});

</script>
</head>

<body>

</body>
</html>

主要是JS代码,所以我用的CODE为JS,大部份都写了注释,不多说主要说一点

每个窗口都有自己关闭按钮,他默认的操作
先HIDE,后COLSE

hide为隐藏窗口,close为在DOM删除窗口,同时也会注销窗口的EXT对象,但close所做的操作是页面程序一直消耗非常高的动作,所以要尽量避免

可以通过closeAction属性来修改关闭按钮的动作,如代码上面写的

学习资料来源于DOJOCHINA的EXT视频,非常感谢
网址:http://www.dojochina.com/index.php?q=node/889

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航