Ext.js创建弹窗根据浏览器大小动态变化

原创已于 2023-07-03 18:02:04 修改 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2023-07-03 17:54:11 首次发布

文章介绍了如何使用Ext.js创建一个弹窗，使其根据浏览器大小自动调整尺寸。设置了maximized为true实现默认最大化，同时通过maximizable:false禁用放大/缩小按钮。此外，窗口还具有resizable属性，允许用户手动调整大小，并监听resize事件来实时更新窗口尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.js创建弹窗根据浏览器大小动态变化

只有当窗为最大化的时候才会生效，所以maximized: true
我的需求是关闭弹窗的放大/缩小按钮，所以maximizable:false（对页面无影响）

在这里插入代码片
				me.xxxWin = Ext.create('xxxxx',{
					title:"修改",
					glyph: tp.IconConst.edit,
					maximized: true, // 设置默认窗口最大化
					maximizable:false, //关闭窗口最大化最小化按钮
					width: Ext.getBody().getViewSize().width * 1, // 设置初始宽度为浏览器宽度的80%
					height: Ext.getBody().getViewSize().height * 1, // 设置初始高度为浏览器高度的80%
					resizable: true, // 允许用户调整窗口大小
					listeners: {
						resize: function(window, width, height) {
							// 监听窗口大小变化事件
							window.setSize(width, height); // 更新窗口尺寸
						}
					},
				});
				me.xxxWin.show();

希望对你有所帮助！