實用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,                          //是否模態窗口，默認為false
    html: "<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的時候窗口資源已經被釋放了的原因