ExtJs 入门教程三[窗体：Window组件]

最新推荐文章于 2021-06-04 05:36:55 发布

330553352

最新推荐文章于 2021-06-04 05:36:55 发布

阅读量872

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs

本文链接：https://blog.youkuaiyun.com/u013037661/article/details/42198547

ExtJs 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建一个可交互的窗口组件，包括窗口的大小调整、模态显示、关闭、最大化、最小化等功能。

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

一、效果

二、代码

<script type="text/javascript">
	Ext.onReady(function() {
		var win = new Ext.Window({
			title : '窗口',
			width : 476,
			height : 374,
			renderTo: Ext.getBody(),//渲染节点,也可以为DOM的ID值
			layout:'form'//定义布局 见说明[6]
			autoDestroy：true//销毁组件在内存中的占用
			html : '<div>这里是窗体内容</div>',
			resizable : true,
			modal : true,
			closable : true,
			maximizable : true,
			minimizable : true
		});
		win.show();
	});
</script>

三、说明

（1）resizable: true：是否可以调整窗体的大小，这里设置为 true。

（2）modal: true：是否为模态窗体[什么是模态窗体？当你打开这个窗体以后，如果不能对其他的窗体进行操作，那么这个窗体就是模态窗体，否则为非模态窗体]。

（3）closable:true：是否可以关闭，也可以理解为是否显示关闭按钮。

（4）maximizable: true：是否可以最大化，也可以理解为是否显示最大化按钮。

（5）minimizable: true：是否可以最小化，也可以理解为是否显示最小化按钮。

(6)常用的有border、column、fit、form、tabel这几种。Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素,border布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示;。column布局把整个容器组件看成一列;form是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用;table布局负责把容器中的子元素按照类似普通html 标签

四、window 组件常用的：属性、方法及事件

1、属性

plain：布尔类型，true表示强制与背景色保持协调，默认值为false。

resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。

maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。

maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。

closable：布尔类型，true表示显示关闭按钮，默认值为true。

bodyStyle：与边框的间距，如：bodyStyle:"padding:3px"。

buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。

closeAction："close"释放窗体所占内存，"hide"隐藏窗体，建议使用"hide"。