ext--window

最新推荐文章于 2020-11-27 16:02:34 发布

luckystar2008

最新推荐文章于 2020-11-27 16:02:34 发布

阅读量101

点赞数

文章标签： ext

Ext 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>window.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css"
			href="../ext/resources/css/ext-all.css">
		<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../ext/ext-all.js"></script>
		<script type="text/javascript">
			Ext.onReady(function(){
			    // 这是一个最基本的窗口
				Ext.get('btn1').on('click',function(){
					new Ext.Window(
						{
							title:"这是一个窗口",//窗口标题
							width:500,//窗口宽度
							height:300//窗口高度
						}
					).show();//需要显示的调用show()方法来显示窗口。
				});
				// 这是一个最基本的窗口，带动画
				Ext.get('btn2').on('click',function(){
					new Ext.Window(
						{
							title:"这是一个窗口",//窗口标题
							width:500,//窗口宽度
							height:300//窗口高度
						}
					).show('btn2');//show()方法的参数，表示动画从哪儿开始，即从哪儿飞出窗口。
				});
				Ext.get('btn3').on('click',function(){
					new Ext.Window(
						{
							title:"这是一个窗口",//窗口标题
							width:500,//窗口宽度
							height:300,//窗口高度
							html:"这里指定窗口中的内容，可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
						}
					).show('btn2');//show()方法的参数，表示动画从哪儿开始，即从哪儿飞出窗口。
				});
				
				// bodyStyle:指定窗口内容的样式。
				Ext.get('btn4').on('click',function(){
					new Ext.Window(
						{
							title:"这是一个窗口",//窗口标题
							width:500,//窗口宽度
							height:300,//窗口高度
							bodyStyle:"padding:5px",
							html:"这里指定窗口中的内容，可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
						}
					).show('btn4');//show()方法的参数，表示动画从哪儿开始，即从哪儿飞出窗口。
				});
				
				// autoLoad:将另一个页面的内容加载到当前窗口。
				Ext.get('btn5').on('click',function(){
					new Ext.Window(
						{
							title:"这是一个窗口",//窗口标题
							width:500,//窗口宽度
							height:300,//窗口高度
							bodyStyle:"padding:5px",
							autoLoad:{
								url:"panel.html",
								scripts:true
							}
							//html:"这里指定窗口中的内容，可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
						}
					).show('btn5');//show()方法的参数，表示动画从哪儿开始，即从哪儿飞出窗口。
				});
				
				// 通过items选择向窗口中添加组件。
				Ext.get('btn7').on('click',function(){
					new Ext.Window(
						{
							title:"这是一个窗口",//窗口标题
							width:500,//窗口宽度
							height:300,//窗口高度
							bodyStyle:"padding:5px",
							autoLoad:{
								url:"../index.jsp",
								scripts:true
							},
							items:[
								new Ext.DatePicker({}),
								new Ext.Button({text:"确定"})
							],
							minimizable:true,
							maximizable:true
							//html:"这里指定窗口中的内容，可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
						}
					).show('btn7');//show()方法的参数，表示动画从哪儿开始，即从哪儿飞出窗口。
				});
				
				Ext.get('btn8').on('click',function(){
					var i = 0;
					
					// 模仿任务栏窗口效果。
					var btn = new Ext.Button(
						{
							text:"新建窗口",
							pressed:true,//处于按下状态。
							handler:function(){
								i++;
								// 单击“新建窗口”，新建一个窗口
								var win = new Ext.Window(
									{
										title:"新建窗口"+i,
										width:500,
										height:300,
										html:"新建窗口"+i,
										minimizable:true,
										maximizable:true,
										listeners:{
											// 事件处理
											minimize:function(window){
												// 最小化事件
												window.hide(window.button.id);
												window.minimizable = true;
											},	
											close:function(window) {
												//window.button:窗口，对按钮的引用。
												var btn__ = window.button;//document.getElementById(window.button.id);
												//用firebug查看ext生成的html代码,按钮实际上是一个table
												// 下面的关系是：btn__parentNode(td).parentNode(tr).removeChild(bnt__parentNode(td));
												alert(btn__.parentNode);
												btn__.parentNode.parentNode.removeChild(btn__.parentNode);
											}
										}
									}
								);
								win.show(btn.id);
								//更新窗口内容。
								win.getUpdater().update({url:"../index.jsp"});
								//新建窗口时，新建一个对应的按钮。
								win.button = new Ext.Button(
									{
										win:win,//按钮对窗口的引用。
										id:"id"+i,
										text:win.title,
										pressed:true,
										handler:function(btn){
											// 如果窗口时最小化的，则显示窗口，否则隐藏窗口。
											if(btn.win.minimizable) {
												btn.win.show(btn.id);
												btn.win.minimizable = false;
											}
											else {
												btn.win.hide(btn.id);
												btn.win.minimizable = true;
											}
										}
									}
								);
								// 新建窗口时会同时新建一个按钮与之关联。
								// 并添加到工具栏。
								toolbar.addButton(win.button);
							},
							renderTo:document.body
						}
					);
					// 定义工具栏
					var toolbar = new Ext.Toolbar(
						{
							height:25,
							renderTo:document.body,
							items:[
								btn
							]
						}
					);
				});
			});
		</script>
  </head>
  
  <body>
    <input type="button" id="btn1" value="Window1">
    <input type="button" id="btn2" value="Window2">
    <input type="button" id="btn3" value="Window3">
    <input type="button" id="btn4" value="Window4">
    <input type="button" id="btn5" value="Window5">
    <input type="button" id="btn6" value="Window6">
    <input type="button" id="btn7" value="Window7">
    <input type="button" id="btn8" value="Window8">
  </body>
</html>

luckystar2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext--window

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;window.html&lt;/title&gt; &lt;meta http-equiv="keywords" content=
复制链接

扫一扫