window对象

最新推荐文章于 2024-09-02 17:51:31 发布

最新推荐文章于 2024-09-02 17:51:31 发布 · 155 阅读

文章标签：

#EXT #CSS #PHP #HTML

前端专栏收录该内容

18 篇文章

订阅专栏

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属性来修改关闭按钮的动作,如代码上面写的

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