本節書摘來自異步社群《ext js實戰》一書中的第1章，第1.6節，作者：【美】jesus garcia著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
在這個練習中，要建立一個ext js的window，然後通過ajax請求一個html檔案，并把檔案的内容展現在window的内容區域。現在從建立主html檔案開始，然後是所有的javascript檔案。
代碼1-1 建立helloworld.html
代碼1-1是典型的隻有ext配置的html标記，包含了合并版的css檔案，ext-all-css1和兩個必須的javascript檔案ext-base.js和ext-all-debug.js2。接着，又建立了一個javascript塊3，這裡對重要的ext.blank_image_url屬性進行了設定。最後，把很快就要建立的helloworld.js檔案包括進來4。
你可能還沒注意到，對于架構的引用使用的是絕對路徑的方式。如果路徑不一樣，一定要改過來。接下來，要建立helloworld.js這個檔案，這個檔案會包含主要的javascript代碼。
代碼1-2 建立helloworld.js
在代碼1-2中，建立了buildwindow函數，這個函數又被傳遞給ext.onready以備稍後執行。在buildwindow中，建立了一個新的ext.window執行個體1，并通過win引用這個執行個體。給ext.window傳遞了一個配置對象，這個對象中包括了初始化視窗執行個體所需要的一切配置屬性。
在這個配置對象中，把id設為'mywindow'，以後ext.getcmp方法就可以根據這個id找到這個視窗。接着又指定了這個視窗的标題，标題會以藍色字型顯示在視窗的最頂部區域，也就是叫做标題欄的地方。接下來，指定了視窗的高度和寬度。然後把layout設定成'fit'，這可以保證不管這個視窗中放的是什麼内容，這個内容都會填滿視窗的内容空間。我們又繼續指定了一個autoload配置對象2，這個對象通知視窗自動取出一個html片段内容（通過url屬性指定的），如果裡面有javascript，還會運作這些代碼（通過scripts:true指定）。
html片段（html fragments）
所謂html片段就是沒有用head和body标簽包圍起來的html，是以不會被認為是一個完整的頁面。ext js之是以要加載html片段，是因為一個頁面中隻能有一個head和body标簽。1
完成了ext.window執行個體的配置對象之後，接下來，又調用了win.show3，這個方法是渲染視窗。這些就是對buildwindow内容的總結。最後一件事就是調用ext.onready4并把buildwindow方法傳進去。這可以保證在正确的buildwindow，也就是在dom完全就緒之後并且在擷取任何圖像之前執行。下面看看視窗是怎麼渲染的。在浏覽器打開helloworld.html。如果之前的所有代碼都正确，應該看到圖1-19所示的一個視窗，在“loading…”文本旁邊會有一個轉動的圖示，這個圖示其實是加載訓示符，表示資料還在加載中。
為什麼會看到這個消息呢？這是因為還沒有sayhi.html頁面，在autoload配置對象的url屬性中指向的就是這個頁面。事實上，這裡是在讓ext js加載某些還不存在東西。接下來，就要處理這個sayhi.html了，下面會在這個檔案中建一個html片段，其中還會包含一些javascript。
代碼1-3 建立sayhi.html
在代碼1-3中，建立的是一個帶有html片段的檔案sayhi.html。這個片段中有一個div1，“hello world”消息就放在這裡。接着，又用了一個script标簽和一些javascript代碼，浏覽器加載這個片段時就會運作這段代碼。在這部分代碼中，建立了一個名為highlightwindow的新函數2，這個函數會延遲一秒執行。在函數内部，對視窗的内容區域執行了一個highlight的效果。highlightwindow的執行延遲一秒3。這個方法是這麼工作的。
首先通過使用一個名為ext.getcmp的輔助方法取得在helloworld.js檔案中建立的window的引用，ext.getcmp根據id查找ext js元件。在建立這個視窗時給它的id是'mywindow'，傳給ext.getcmp的就是這個id。之是以能夠這麼做，是因為所有的元件（部件）在初始化時都會用componentmgr進行注冊。在程式的任何地方都可以通過ext.getcmp根據id得到引用。
在得到了視窗的引用之後，又用視窗的body屬性得到了視窗内容區的引用，winbody。然後調用它的高亮方法，這個方法會對元素進行高亮操作（從黃色漸變成白色）。這些内容就是對highlightwindow方法的總結。
這段javascript代碼塊所做的最後一件事就是調用highlightwindow.defer使用的值是1000，這會讓highlightwindow的執行延遲1000毫秒（或者1秒）。
如果說從來沒聽說過javascript中有個defer，不要緊，因為這是個ext引入的方法。ext js利用了javascript的可擴充性對一些核心的語言類，例如array、date、function、number、string添加了許多好用的方法。這就意味着這些類的每個執行個體都有了新的好用的方法。就這個例子而言，用到的是defer，它是function的一個擴充。如果經驗足夠豐富，可能會問，“為什麼不用settimeout呢？”。第一個原因是因為更簡單，調用任何方法的.defer，然後傳入一個時間就可以延遲其執行。第二個原因是因為可以對被延遲執行的方法執行的作用域進行控制，并傳入定制的參數，這也是settimeout所欠缺的。
現在就可以結束這個html片段了，window也能取到這個片段了。重新整理helloworld.html後，可以看到如圖1-20所示的内容。
圖1-20 ext js window加載 html片段（左）對内容區使用高亮效果
如果一切正确，看到的結果也應該與圖1-20一樣，首先内容區域會用html片段更新（左），經過1秒鐘之後，視窗的内容區域會用黃色高亮顯示（右）。很酷吧？建議你花些時間調整一個這個例子，例如用api修改高亮效果的顔色。提示一下：從ext js > fx下載下傳有效果的清單以及對應的參數。