1.2.1 下載下傳ExtJs壓縮包
最新版本（截至2008-04-21）：http://extjs.com/deploy/ext-2.0.2.zip
1.2.2 解壓ExtJs壓縮包
解壓後的目錄如下圖所示，其中的demo為建立的目錄。
1.2.3 在demo檔案夾中建立一個檔案1.2a_helloword.html
内容如下：
01.
<html>
02.
<head>
03.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=iso-8859-1"
>
04.
<title>Hello World</title>
05.
<link rel=
"stylesheet"
type=
"text/css"
href=
"../resources/css/ext-all.css"
/>
06.
<script type=
"text/javascript"
src=
"../adapter/ext/ext-base.js"
></script>
07.
<script type=
"text/javascript"
src=
"../ext-all.js"
></script>
08.
<script type=
"text/javascript"
>
09.
Ext.onReady(
function
(){
10.
alert(
'Hello World!'
);
11.
});
12.
</script>
13.
</head>
14.
<body>
15.
</body>
16.
</html>
用浏覽器浏覽這一個檔案，如果看到下面這一個界面，恭喜你，你的第一個ExtJs完成了。
示範位址:http://extjs.org.cn/extjs/demo/1.2a_helloword.html
效果圖如下:
簡單解釋一下上面代碼
1.
<link rel=
"stylesheet"
type=
"text/css"
href=
"../resources/css/ext-all.css"
/>
這一個是引入ExtJs的預設樣式
1.
<script type=
"text/javascript"
src=
"../adapter/ext/ext-base.js"
></script>
2.
<script type=
"text/javascript"
src=
"../ext-all.js"
></script>
ExtJs所需要的核心腳本全部都在這兩個js檔案中。
1.
<script type=
"text/javascript"
>
2.
Ext.onReady(
function
(){
3.
//頁面初始化代碼
4.
});
5.
</script>
Ext.onReady 是指在整個頁面加載完後執行。
1.3.4 絢麗效果的彈出框
上面（1.3.3）隻是告訴你環境配置成功了，下面我們來看一下ExtJs中的彈出框的效果。
代碼如下：
01.
<html>
02.
<head>
03.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=iso-8859-1"
>
04.
<title>Hello World</title>
05.
<link rel=
"stylesheet"
type=
"text/css"
href=
"../resources/css/ext-all.css"
/>
06.
<script type=
"text/javascript"
src=
"../adapter/ext/ext-base.js"
></script>
07.
<script type=
"text/javascript"
src=
"../ext-all.js"
></script>
08.
<script type=
"text/javascript"
>
09.
Ext.onReady(
function
(){
10.
Ext.MessageBox.alert(
'Message'
,
'Hello World ! '
);
11.
});
12.
</script>
13.
</head>
14.
<body>
15.
</body>
16.
</html>
示範位址:http://extjs.org.cn/extjs/demo/1.2b_helloword.html
隻是有一句代碼不同而已，但是效果卻相差了十萬八千裡。