ExtJS入門教程01，Window如此簡單，你怎能不會？

這是一系列ExtJS教程，今天的是第一篇，主要介紹ExtJS中Window的基本用法。希望大家能夠支持！

來吧，創建一個漂亮的彈出窗

var win = Ext.create("Ext.Window", {
    title: "ExtJS Window",
    width: 500,
    height: 300,
    autoShow: true
});

效果：

小伙伴們注意了，如果不加autoShow:true的時候，window是不會顯示出來的，當然，我們可以使用win.show()方法來顯示一個窗口。

在窗口中顯示一個網頁

小伙伴們常常希望能夠在window中添加iframe，可以方便的將其它頁面顯示在窗口中，具體的做法是如下：

Ext.onReady(function () {
    var win = Ext.create("Ext.Window", {
        title: "ExtJS Window",
        width: 500,
        height: 300,
        html:'<iframe style="overflow:auto;width:100%; height:100%;" src="http://www.qeefee.com" frameborder="0"></iframe>',
        autoShow: true
    });
});

效果：

（我這里顯示了自己的網站，臭美一下~）

為window指定html屬性，這個屬性是要在window的body中顯示的html元素，可以是任意的html標簽（iframe也是html標簽），例如我們要顯示一段話：

Ext.onReady(function () {
    var win = Ext.create("Ext.Window", {
        title: "ExtJS Window",
        width: 500,
        height: 300,
        html:'<p>齊飛是個程序員！</p>',
        autoShow: true
    });
});

效果如下：

顯示大段的HTML

當然，小伙伴們的需求總是很多的，比如就有人說了，html屬性如果很長，這樣拼接字符串豈不是很丑？！

答案是肯定的，丑的不能再丑了~大家看一下iframe的那個代碼，已經是比較長了，編輯的時候經常要拖動下面的滾動條，這樣顯然是不方便的，並且還要經常寫屬性，引號、雙引號來回切換，簡直是煩透了，有沒有解決辦法呢？

額，辦法肯定是有的，小伙伴們，來試試contentEl配置項吧。

contentEl配置項允許我們將一個html元素指定為window要顯示的內容，也就是說，如果我們頁面上有一個如下的div：

<div id="content">
    <strong>Window 的內容</strong>
    <p>齊飛是個程序員！</p>
</div>

我們可以在window的配置中來使用：

Ext.onReady(function () {
    var win = Ext.create("Ext.Window", {
        title: "ExtJS Window",
        width: 500,
        height: 300,
        contentEl: 'content',
        autoShow: true
    });
});

效果如下：

contentEl可以將頁面中現有的html元素添加到window中，需要注意的是一定要在頁面加載完成之后使用，否則頁面中的元素是不存在的。

解決內容閃爍的問題

這個時候，愛找麻煩的小伙伴又站了出來，小伙伴說頁面加載以后內容先在頁面中繪制了，會閃爍一下才顯示在window中，額，當然，這是一個問題，那么該如何解決呢？

聰明的小伙伴這個時候自己想到一個辦法，就是先將div隱藏，加一個style屬性，把display設置為none；

愛動手的小伙伴驗證了聰明的小伙伴的想法，發現div在window中仍然是隱藏的，如果我們再添加一個額外的方法豈不是大費周章？

現在我們來看一看contentEl的API吧，在api的最后一段，有這樣一句話：

Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

英語好的小伙伴們知道了吧，為我們的div添加一個x-hidden或者x-hide-display屬性就能簡單的解決內容閃爍的問題了。修改后的div如下：

<div id="content" class="x-hidden">
    <strong>Window 的內容</strong>
    <p>齊飛是個程序員！</p>
</div>

作為一個容器，它應該這樣

看到了吧，window就是這么簡單，我們可以很方便的來使用它。

通過Ext.create來創建window對象，create方法的第二個參數為window的配置項，包括width、height等。

ExtJS window作為一個容器，可以在里面添加其他的容器或組件，例如form、grid等，在添加extjs組件的時候可以使用items配置項來實現。

下面的代碼演示了如何向window中添加一個form，並在form中加入一些控件：

Ext.onReady(function () {
    var win = Ext.create("Ext.Window", {
        title: "ExtJS Window",
        width: 500,
        height: 300,
        items: [
            {
                xtype: "form",
                border: false,
                bodyPadding: 5,
                fieldDefaults: {
                    labelAlign: 'right',
                    labelWidth: 60,
                    width: 470
                },
                items: [
                    {
                        xtype: "textfield", fieldLabel: "姓名"
                    },
                    {
                        xtype: "textarea", fieldLabel: "留言"
                    }
                ]
            }
        ],
        buttons: [
            {
                text: "確定"
            }
        ],
        autoShow: true
    });
});

效果如圖：

哎呀，我被關閉了！

小伙伴們通常希望在window關閉的時候得到通知，例如刷新現有的列表等，現在extjs中的事件是通過在配置項中添加listeners來完成，當然，如果是動態添加事件，就要使用on方法了。

我們先來一個通過listeners添加事件的例子：

var win = Ext.create("Ext.Window", {
    title: "ExtJS Window",
    width: 500,
    height: 300,
    listeners: {
        close: function () {
            Ext.MessageBox.alert("提示", "哎呀，我被關閉了！");
        }
    },
    buttons: [
        {
            text: "確定",
            handler: function () {
                this.up("window").close();
            }
        }
    ],
    autoShow: true
});

當我們點擊“確定”按鈕的時候將關閉窗口，試一下效果吧。

下面來一個通過on方法添加事件的例子：

var win = Ext.create("Ext.Window", {
    title: "ExtJS Window",
    width: 500,
    height: 300,
    buttons: [
        {
            text: "確定",
            handler: function () {
                this.up("window").close();
            }
        }
    ],
    autoShow: true
});

win.on("close", function () {
    Ext.MessageBox.alert("提示", "哎呀，我被關閉了！");
});

好了，這就是ExtJS Window的一些入門級用法，你還有別的不明白？告訴我，我來完善這篇文章。