您的位置：首页 > Web前端 > JavaScript

Extjs-弹出窗口 Ext.Window

2012-08-14 18:01 411 查看

项目中的窗口

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>

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

标签：

相关文章推荐

新的分享

章节导航