Extjs Window用法詳解

標籤：

今天我們來介紹一下Extjs中一個常用的控制項Window。Window的作用是在頁面中建立一個視窗，這個視窗作為容器，可以在它裡面加入grid、form等控制項，從而來實現更加複雜的介面邏輯。

建立Extjs Window

建立Extjs Window的代碼如下：

//建立windowvar 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中添加配置項：

//建立windowvar 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添加到元素中，問題就會解決了。

Extjs Window用法詳解