本教程假設你已經安裝好ExtJS庫。安裝的目錄是extjs 并位于你程序的上一級目錄。如果安裝在其它地方你必須更改路徑，更改示例文件中script標簽的src的屬性。
除ExtJS庫本身外，我們還需要兩個文件：
先看看一份html文檔，比較精簡。并附有詳細說明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="applayout.js"></script>
<!-- 本地化的腳本引用在這里 -->
<script type="text/javascript">
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
</script>
<title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>
開頭的兩行聲明了文檔的類型。程序可以不用doctype,但是這樣的話瀏覽器可能默認其為Quirks怪僻類型，會導致處理跨瀏覽器這一問題上出現差異。
我們采用HTML 4.01 Transitional的文檔類型，該類型在主流瀏覽器上支持得不錯。當然，你也可以根據你的需求采用其它類型的doctype，但是記住別忘了要加上doctype。
接著指定HTML頭部的Content-Type。做這些事情其實很瑣碎，但總是有益處。
然后引入EXT的樣式，適配器和EXTJS本身。有兩種版本的ExtJS：
開發階段的時候便需要引入debug的版本。
applayout.js這個文件就是我們的程序，緊跟著的是本地化的腳本，這里可以換成Extjs翻譯好的版本
跟著我們開始分配事件句柄(event handler)，使得在文檔全部加載完畢后，程序就可以初始化（運行）。
下面的這一行：
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
可這樣說：當文檔全部加載完畢,就運行myNameSpace.app的init方法,規定的作用域是myNameSpace.app。
然后是標題，頭部的結尾，body（當前空）和結束標簽。
文檔的解說就說到這兒了。
/**
* Application Layout
* by Jozef Sakalos, aka Saki
* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)
*/
// 填充圖片的本地引用
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
// 創建命名空間
Ext.namespace('myNameSpace');
// 創建應用程序
myNameSpace.app = function() {
// 元素還沒創建,未能訪問
// 私有變量
// 私有函數
// 公共空間
return {
// 公共的屬性,如,要轉換的字符串
// 公共方法
init: function() {
alert('應用程序初始化成功。');
}
};
}(); // 程序底部
// 文件底部文件最開始的幾行是注釋，說明該文件的主要內容，作者，作者相關的資訊。沒有任何注釋的程序也可以正常的運行，－但請記住：每次寫的程序要容易給人看得懂的 Always write your application as if you would write it for another.當你回頭看你幾個月前寫的代碼，發現你根本不記得自己寫過什么的時候，就會明白這個道理，并養成編碼的好習慣。接著是要指向你服務器的填充圖片，如不指定則默認extjs.com。每次運行程序的時候都訪問extjs.com，不推薦這樣，應該先修改這個常量值指向到本地。
現在自定義命名空間。將所有變量和方法都劃分到一個全局對象下管理，這樣的好處是避免了變量名沖突和由不同函數干擾了全局變量的值。名字（namespace）可按自己的方案選擇。
整段代碼的重點是，我們創建了 myNameSpace對象的屬性app，其值是一個函數立刻運行之后的返回值。
如果運行我們的代碼：
var o = function() {
return {p1:11, p2:22};
}();實際上我們創建了一個匿名函數（沒有名字的函數），經過解釋（預編譯？）之后讓它立刻運行（注意函數后面的()）。最后將函數返回的對象（注意此時是一個object變量）分配到變量o。我們的程序便是這種思路去寫的。
你可以把私有變量和私有函數直接定義在function和return這兩個聲明之間，但是請切記：此時不能訪問任何html頁面中的元素，那會導致錯誤，因為這段代碼在加載時頁面的head中就運行了，而這時候html頁面中的其它元素還沒有被加載進來。
另外一方面，函數init,是由匿名函數返回的對象的一個方法而已。它會在文檔全部加載后才運行。換言之整個DOM樹已經是可用的了。
一切都還好吧～如果能正確運行http://yourserver.com/applayout/applayout.html，不出現什么錯誤的話將出現一個警告。
接下來是利用這個空白的模板，討論本文的重點。
新聞熱點
疑難解答
