Extjs Window用法详解
今天我们来介绍一下Extjs中一个常用的控件Window。Window的作用是在页面中创建一个窗口，这个窗口作为容器，可以在它里面加入grid、form等控件，从而来实现更加复杂的界面逻辑。
本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！
创建Extjs Window
创建Extjs Window的代码如下：
//创建window
var win = Ext.create("Ext.window.Window", {
id: "myWin",
title: "示例窗口",
500,
height: 300,
layout: "fit",
items: [
{
xtype: "form",
defaultType: 'textfield',
defaults: {
anchor: '100%',
},
fieldDefaults: {
labelWidth: 80,
labelAlign: "left",
flex: 1,
margin: 5
},
items: [
{
xtype: "container",
layout: "hbox",
items: [
{ xtype: "textfield", name: "name", fieldLabel: "姓名", allowBlank: false },
{ xtype: "numberfield", name: "age", fieldLabel: "年龄", decimalPrecision: 0, vtype: "age" }
]
}
]
}
],
buttons: [
{ xtype: "button", text: "确定", handler: function () { this.up("window").close(); } },
{ xtype: "button", text: "取消", handler: function () { this.up("window").close(); } }
]
});
代码中的Form可以参考《Extjs Form用法详解》。显示效果如下：
显示Extjs Window
使用上面的代码创建好的Window并没有显示出来，它只是创建了Window，而这个Window在默认情况下是不显示的。
如果要它显示出来，我们可以通过在配置项中添加autoShow来实现，代码如下：
autoShow: true,
或者，我们可以显示的调用window的show方法：
win.show();
创建模态窗口
Extjs Window还可以作为模态窗口打开。什么是模态窗口呢？当打开一个模态窗口的时候，只有模态窗口可操作，它背后的东西都会被遮罩，从而变得不能操作。
在Extjs中，我们可以通过修改window的配置项来创建模态窗口：
modal: true,
关闭按钮和关闭动作
Extjs Window可以配置是否显示关闭按钮：
closable: false,
在关闭Extjs Window的时候，通过配置项closeAction可以控制按钮是销毁（destroy）还是隐藏（hide），默认情况下为销毁：
closeAction: "hide",
最大化和最小化
Extjs Window的最大化和最小化按钮可以通过配置项显示出来：
maximizable: true, minimizable: true,
效果如图：
当我们点击最大化按钮的时候，窗口会变为全屏；
但是，在点击最小化按钮的时候，窗口没有什么操作，这是为什么呢？根据API里面的说法，最小化按钮没有执行任何操作，我们必须处理minimize事件来完成最小化的操作：
listeners: {
minimize: function (win, opts) {
win.collapse();
}
},
通过上面的代码，我们可以在点击最小化按钮的时候，将window折叠起来。
在Extjs Window中显示iframe
在Window中，既可以添加Extjs控件，也可以显示html代码。我们可以通过html配置项来将一个iframe添加到window中：
var win = Ext.create("Ext.window.Window", {
id: "myWin",
title: "示例窗口",
500,
height: 300,
layout: "fit",
autoShow: true,
html: '<iframe style="overflow:auto;100%; height:100%;" src="http://www.qeefee.com" frameborder="0"></iframe>',
});
显示效果如下：
在Extjs Window中显示大段HTML
html配置项可以帮助我们在window中显示一段较简单的html代码，如果要显示太复杂的html，写在js代码中显然是有些不利于组织和维护。
那么要显示大段html的时候，我们可以事先将它写在html代码中，然后通过contentEl配置项将它显示在window中。
首先，在html中添加一段代码：
<div id="content">
<h2>欢迎访问起飞网Extjs教程</h2>
<p>
更多Extjs教程，请访问<a href="http://www.qeefee.com/zt-extjs">http://www.qeefee.com/zt-extjs</a>
</p>
</div>
然后，在window中添加配置项：
//创建window
var win = Ext.create("Ext.window.Window", {
id: "myWin",
title: "示例窗口",
500,
height: 300,
layout: "fit",
autoShow: true,
contentEl: "content"
});
显示效果如下：
这种方式是先将html元素绘制在body中，然后再将它从body移动到window容器内的，所以可能会引起闪烁的现象。
解决闪烁的办法是先将div隐藏，然后在移动到window后进行显示。Extjs也考虑到了这个问题，并提供了两个css class来解决，分别是：x-hidden和x-hide-display，我们可以将任意一个属css class添加到元素中，问题就会解决了。
原文链接：https://www.cnblogs.com/youring2/p/3990424.html ，原创发布在http://www.qeefee.com/article/extjs-window-in-detail