1. 需求
1.1 瀏覽器
ExtJS 4支持所有主流瀏覽器,這個就不用說了
如果需要調(diào)試,,推薦使用一下的瀏覽器
- Chrome
- Safari
- Firefox
以上都請用最新版吧
1.2 服務(wù)器
作為Web開發(fā)工程師,,如果你不會弄個server說明你不合格,,所以還是搭建個本地Apache吧,就不多說了
1.3 ExtJS 4 SDK
去官網(wǎng)下載最新版的壓縮包,解壓縮到你的web服務(wù)器根目錄(作為web開發(fā)工程師你自己應(yīng)該找到這個目錄),,如果解壓出來的目錄不是extjs,,你可以重命名為extjs,然后訪問http://localhost/extjs/index.html看到歡迎頁面就對了
2. 程序架構(gòu)
2.1 目錄結(jié)構(gòu)
推薦下面這種目錄結(jié)構(gòu)(非強制,,如果你足夠懂和自信)
- appname
- app
- namespace
- Class1.js
- Class2.js
- ...
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
- appname 包含所有程序代碼,,是根目錄
- app 包含所有類,按包的規(guī)則命名子目錄
- extjs ExtJS 4 SDK
- resources CSS 圖片等 資源文件
- index.html 入口文件
- app.js 程序入口
暫時先不用把這些目錄都記住,,先通過最簡單的方式做一個hello world程序,,創(chuàng)建一個“Hello Ext”程序,在web服務(wù)器根目錄下創(chuàng)建一個目錄helloext,,并創(chuàng)建兩個文件:
- helloext
- app.js
- index.html
然后把ExtJS SDK 解壓到helloext目錄并重命名為extjs,,然后在index.html中輸入以下內(nèi)容
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
- extjs/resources/css/ext-all.css 包含了所有樣式
- extjs/ext-debug.js 包含了最基礎(chǔ)的一些類,ExtJS 4 Core核心部分
- app.js 包含程序邏輯
在app.js中輸入以下內(nèi)容
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
完成了以上工作,,打開瀏覽器訪問http://localhost/helloext/index.html會看到一個Panel,,Panel的title是”Hello Ext”
2.2 動態(tài)加載
打開瀏覽器的控制臺,刷新以下頁面,,會看到如下的信息
ExtJS 4 實現(xiàn)了動態(tài)按須加載,,上面的例子里,Ext.create創(chuàng)建了一個Ext.container.Viewport的實例,,Ext.create調(diào)用時,,loader會首先檢查Ext.container.Viewport類是否已經(jīng)定義,。如果沒有定義,,loader會自動加載對應(yīng)文件。上面的例子里面Viewport.js最后成功加載了,,但是還是有個warning,,因為調(diào)用Ext.create時再加載,會卡住程序一小會兒直到對應(yīng)文件加載完畢,,如果加載的多,,卡頓可能比較明顯??梢杂胷equire的方式保證最基礎(chǔ)的依賴加載完畢再運行app,。
在Ext.application 語句前加上:
Ext.require('Ext.container.Viewport');
這樣可以保證app運行前加載完Viewport,就不會出現(xiàn)warning
2.3 引入庫的方法
解壓開ExtJS 4 SDK之后可以得到下面這幾個庫文件:
- ext-debug.js 這個文件只在開發(fā)時使用,,它只提供最核心的類讓程序可以運行,,任何附加的類都通過動態(tài)加載引入(會造成n多請求,所以發(fā)布應(yīng)用的時候不要用這個)
- ext.js 這個文件功能和ext-debug.js一致,,但是是用于對外發(fā)布的,,它和app-all.js一起使用(見第三節(jié))
- ext-all-debug.js 這個文件包含ExtJS全部內(nèi)容,全部class,它可以像ExtJS 3那樣使用,,可以減少學(xué)習(xí)成本,,官方還是推薦ext-debug.js這種引入了新機制的方式
- ext-all.js 這是ext-all-debug.js的壓縮版本,內(nèi)容跟其一致,,可用于發(fā)布,,但是它包含所有內(nèi)容,官方不推薦,,具體可參見第三節(jié)按須打包的方法
3. 發(fā)布
新引入的Sencha SDK Tools(點此下載)讓ExtJS 4的發(fā)布更容易(這是官方說法,,我不這么認為),這個工具可以根據(jù)依賴進行打包,,具體操作如下
安裝好SDK Tools之后,,打開命令行終端,切換到應(yīng)用跟目錄
cd path/to/web/root/helloext
在這里執(zhí)行一個簡單的命令,,可以生成一個jsb3文件,,這文件有描述依賴的作用
sencha create jsb -a index.html -p app.jsb3
如果有服務(wù)器端腳本,可以用下面這個命令,,命令中的URL是實際的URL,,比如你用php,可能就是index.php而不是index.html
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
這個命令搜索index.html中真正使用的依賴
生成jsb3文件之后是可以對其修改的,,比如自定義一些依賴,,但是大多數(shù)情況可以直接繼續(xù)下面的命令
sencha build -p app.jsb3 -d .
這條命令根據(jù)jsb3文件,生成兩個文件:
- all-classes.js 這個文件包含app自定義的所有類,,這個文件沒有壓縮可以方便調(diào)試,,在我們的例子這個文件是空的,因為Hello Ext應(yīng)用沒有任何自定義class
- app-all.js 這個文件是壓縮過的,,包含所有app代碼和依賴的類,,相當(dāng)于一個可以用于發(fā)布的 all-classes.js + app.js
ExtJS應(yīng)用是需要一個index.html的,你可根據(jù)自己的服務(wù)器端腳本去做這個入口,,不一定一定要是index.html,,例子中我們創(chuàng)建一個用于發(fā)布的index-prod.html:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>