窗口無論是在基本的js中還是在Ext這種js框架中都是比較常見的，而且現在多數js框架也在視圖打造唯美的窗口，當然，Ext就是其中一個。Ext的窗口時很漂亮的，而且類型眾多，今天我們就從基礎做起逐漸來了解Ext的窗口。
注意：對于Ext的目錄及其文件存放結構在此就不再過多贅余。
基本的Ext對話框
首先用Ext的話肯定要引入其類庫及其樣式文件，注意對于ext-base.js和ext-all.js的引入順序一定不能夠顛倒。
接下來當然就是寫我們自己的js代碼，注意Ext和jQuery一樣都會在load事件之前加載代碼，在Ext中對應的就是onReady事件。
首頁我們在頁面有一個按鈕，其id為btnAlert，然后在onReady中我們給按鈕添加click事件，在按鈕的單擊事件中我們通過Ext.MessageBox.alert()來彈出對話框。
效果如圖：
確認對話框
我們都知道在js中有時會用到confirm，當然在ext中也是有的。
用法和js沒有區別，效果如圖：
輸入對話框
其實看了上面兩個對話框，你應該就知道下面肯定要說到Prompt
運行效果：
擴展：多行輸入對話框
在js中我們應該是沒有多行的prompt，但是在Ext中卻用自定義對話框（下面會說到）給我們模擬出來了。
效果：
自定義對話框
其實你會發現上面幾種對話框有時候并不能滿足我們的要求，我們經常用word都知道如果我們新建了或修改了信息之后而沒有保存，現在要關閉word的時候就會給出提示，在這個提示框中我們不是只有兩種選擇而是有三種，您可以選擇保存、不保存或者取消關閉操作。下面我們也來定義一個這樣的對話框。
我們第一個行數用于為自定義對話框服務，在對話框中我們首先聲明標題信息，然后定義提示信息，接著定義按鈕類型、處理函數、圖標等信息，當然著所有的一切都是json格式。
效果如圖
如果點擊yes的話就會按照上面定義的函數提示保存成功。
當然上面的buttons和icon還有其他形式，具體見ExtJs API中MessageBox
進度條對話框
Ext中給我們準備了進度條，下面我們看一下：
對于上面的代碼，注意其進度處理函數是在click事件內部，通過調用Ext.MessageBox.updateProgress()函數，Ext自己就會知道是更新當前的進度對話框的進度。
效果如圖：
等待處理進度對話框
進度條是在已知處理時間的情況下使用，如果說你要處理一個事情，但是不知道處理時間這是我們就會用到等待進度，也就是這個進度重復行進就像啟動windows xp時那個進度條一樣。
效果如圖：
Ext窗口
到這里位置，我們才說道Ext中的窗口，上面我們主要談了一下Ext中的各種對話框，窗口還沒有說（關于窗口和對話框的區別在此就不再過多解釋了）。經常地在很多論壇中我們能夠看到注冊及登錄頁面不再像以前一樣單獨做一個頁面而是以一個窗口的形式展現在我們面前供我們數據信息，之后可以提交。
對于上面的代碼基本上都有注釋，我也不再做解釋，對于TabPanel如果不理解沒有關系，后面會專門提到。
運行效果：
注意上面的Ext.MessageBox也可以用Ext.Msg這個別名代替，其實上面我們已經用了。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
