ext--window

qincidong

浏览: 237818 次
性别:
来自: 北京

最近访客更多访客>>

abcd2010

qq1002517

samwong

OMGlalala

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ext

<!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>

分享到：

ext--下拉列表 | ext--表单验证

2012-05-21 22:08
浏览 540
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext--window

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext--window

评论

发表评论

相关推荐

EXT事件队列

Ext方法重写

Ext类继承

Ext类别名

Ext命名空间别名

Ext类的构造方法

Ext类静态方法

Ext为类增加属性和方法

Ext命名空间

ext--Ajax

ext--tablepanel

ext--form

ext--form layout

ext--表单初始化

ext--表单验证

ext--panel

ext--下拉列表

ext--消息框

ext--消息框2

ext--悬停提示

最近访客更多访客>>