Extjs-弹出窗口 Ext.Window

最新推荐文章于 2020-12-31 06:49:02 发布

itlwc

最新推荐文章于 2020-12-31 06:49:02 发布

阅读量1.2w

点赞数 1

分类专栏： Extjs 文章标签： button layout

本文链接：https://blog.youkuaiyun.com/itlwc/article/details/7866099

版权

Extjs 专栏收录该内容

42 篇文章

订阅专栏

项目中的窗口

var addWindow = new Ext.Window({  
  	title : '增加用户',
   	width : 400,
	resizable : false,
	closeAction:'hide', 
	autoHeight : true, 
    constrainHeader : true,
   	modal : true,
    plain : true,
	items : [addForm]  
});

1.创建简单窗口

窗口显示show()	窗口隐藏hide()	 窗口销毁close()

<script type="text/javascript" defer>
	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
		var window = new Ext.Window({
	      	//layout : 'fit',//设置window里面的布局
	       	width:300,
	       	height:200,
	       	//关闭时执行隐藏命令,如果是close就不能再show出来了
	       	closeAction:'hide',
	       	//draggable : false, //不允许窗口拖放
	       	//maximizable : true,//最大化
	       	//minimizable : true,//最小话
	       	//constrain : true,//防止窗口超出浏览器
	       	//constrainHeader : true,//只保证窗口顶部不超出浏览器
	       	//resizble : true,//是否可以改变大小
	       	//resizHandles : true,//设置窗口拖放的方式
	       	//modal : true,//屏蔽其他组件,自动生成一个半透明的div
	       	//animateTarget : 'target',//弹出和缩回的效果
	       	//plain : true,//对窗口进行美化,可以看到整体的边框
	       	
	       	buttonAlign : 'center',//按钮的对齐方式
	       	defaultButton : 0,//默认选择哪个按钮
	       	buttons : [{
	       		text : '确定',
	       		handler : function(){
	       			window.hide();
	       		}
	       	},{
	       		text : '取消'
	       	}]
	   	});
		window.show();
		new Ext.Viewport({
			items : [window]
		});
	});
</script>

2.window的复杂布局

2.1.效果图

2.2.代码

<script type="text/javascript" defer>
	Ext.onReady(function(){
		var tabs = new Ext.TabPanel({
			region : 'center',
			//距离top、right、bottom、left边界的距离,单位为像素
			margins : '3 3 3 0',
			activeTab : 0,
			defaults : {
				autoScroll : true
			},
			items : [{
				title : '默认',
				html : '内容'
			},{
				title : '标签',
				html : '内容'
			},{
				title : '可关闭',
				html : '内容',
				closable : true
			}]
		});
		
		var panel = new Ext.Panel({
			title : '导航',
			region : 'west',
			split : true,
			width : 200,
			//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
			collapsible : true,
			margins : '3 0 3 3',
			cmargins : '3 3 3 3'
			
		});
		
		var window = new Ext.Window({
			title : '复杂布局',
			closable : true,
			border : false,
			width : 800,
			height : 500,
			layout : 'border',
			items :[panel,tabs]
		});
		
		window.show();
	});
</script>

3.Ext.WindowGroup()

默认情况下窗口都在Ext.WindowMgr组中,窗口分组由Ext.WindowGroup类定义,该类包括bringToFront,getActive,hideAll,sendToBack函数,可以用来操作分组中的窗口

效果图

代码

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>
	<script type="text/javascript" defer>
		var mygroup;
		var i = 0; 
		var newWin = function(){
			var win = new Ext.Window({
				title : '窗口'+i++,
				width : 400,
				height : 300,
				maximizable : true,
				manager : mygroup
			});
			win.show();
		}
		var toBack = function(){
			mygroup.sendToBack(mygroup.getActive());
		}
		var hideAll = function(){
			mygroup.hideAll();
		}
		Ext.onReady(function(){
			Ext.QuickTips.init();//开启提示功能
			Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
			mygroup = new Ext.WindowGroup();
			Ext.get('btn').on('click',newWin);
			Ext.get('btnToBack').on('click',toBack);
			Ext.get('btnHide').on('click',hideAll);
		});
	</script>
  </head>
  <body>
  	<input id = 'btn' type = 'button' name = 'add' value = '新窗口'></input>
  	<input id = 'btnToBack' type = 'button' name = 'add' value = '放到后台'></input>
  	<input id = 'btnHide' type = 'button' name = 'add' value = '隐藏所有'></input>
  </body>
</html>