实用ExtJS教程100例-006：ExtJS中Window的用法示例

在前面几个示例中，我们演示了MessageBox的各种用法，今天这篇文章将演示如何使用Window。

我们首先来创建一个窗口：

var win = Ext.create("Ext.window.Window", {title: "标题 - www.qeefee.com", //标题height: 200, //高度width: 400, //宽度layout: "fit", //窗口布局类型modal: true, //是否模态窗口，默认为falsehtml: "<h2>你打开了一个窗口</h2>" //窗口的html代码 }); win.show(); //显示窗口

窗口的截图如下（查看在线示例）：

在ExtJS 4.x中，我们推荐使用Ext.create()方法来创建对象。这个方法的第一个参数是类名，第二个参数的创建对象时用到的配置项。

在上面的示例中，我已经将配置项加了备注，不在详细的说明。

接下来看一个比较复杂的窗口

var win = Ext.create("Ext.window.Window", {title: "标题 - www.qeefee.com",height: 300,width: 400,layout: "fit",modal: true,resizable: false,maximizable: true,minimizable: false,closable: true,tbar: [{ text: "保存", iconCls: "qicon-save" },{ text: "新建", iconCls: "qicon-add" }],buttons: [{ text: "确定", iconCls: "qicon-accept" },{ text: "取消", iconCls: "qicon-delete" },],items: [] }); win.show();

程序运行截图如下（查看在线示例）：

这个窗口有最大化和关闭按钮，并且包含了工具栏和按钮项，更像是我们在实际开发中使用的。

关闭窗口

窗口的关闭有两种方法，一种是close，一中是hide，从名字中就可以看出，前一个是真的关闭窗口并释放窗口资源，而hide则是将窗口隐藏了。

var g_win = Ext.create("Ext.window.Window", {title: "标题 - www.qeefee.com",height: 200,width: 400,layout: "fit",modal: false,html: "<h2>你打开了一个窗口</h2>" }); Ext.get("btn3").on("click", function () {g_win.show(); //显示窗口 }); Ext.get("btn4").on("click", function () {g_win.hide(); //隐藏窗口 }); Ext.get("btn5").on("click", function () {g_win.close(); //关闭窗口（窗口关闭的时候将释放窗口资源） });

在这段代码中，我们首先定义了一个全局的窗口，并在界面上放了三个按钮呢，分别绑定显示、隐藏和关闭窗口的方法。

当我们点击关闭窗口按钮以后，再回过头来点击显示窗口时会发现没有反应，打开控制台则能看到脚本错误：

这是因为close的时候窗口资源已经被释放了的原因（查看在线示例）。

本文还发布在了ExtJS教程网站起飞网上面，如果转载请保留本段声明，谢谢合作。

如果认为此文对您有帮助，别忘了支持一下哦！

作者：齐飞 来源：http://youring2.cnblogs.com/ 声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。
转载：http://www.cnblogs.com/youring2/p/extjs-100-examples-window.html

总结

以上是生活随笔为你收集整理的实用ExtJS教程100例-006：ExtJS中Window的用法示例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。