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: "示例窗口",
    width: 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: "示例窗口",
    width: 500,
    height: 300,
    layout: "fit",
    autoShow: true,
    html: '<iframe style="overflow:auto;width: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: "示例窗口",
    width: 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添加到元素中，問題就會解決了。