在前面幾個示例中，我們演示了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的用法示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。