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)加載

打開瀏覽器的控制臺,刷新以下頁面,,會看到如下的信息

debug info

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之后可以得到下面這幾個庫文件:

  1. ext-debug.js 這個文件只在開發(fā)時使用,,它只提供最核心的類讓程序可以運行,,任何附加的類都通過動態(tài)加載引入(會造成n多請求,所以發(fā)布應(yīng)用的時候不要用這個)
  2. ext.js 這個文件功能和ext-debug.js一致,,但是是用于對外發(fā)布的,,它和app-all.js一起使用(見第三節(jié))
  3. ext-all-debug.js 這個文件包含ExtJS全部內(nèi)容,全部class,它可以像ExtJS 3那樣使用,,可以減少學(xué)習(xí)成本,,官方還是推薦ext-debug.js這種引入了新機制的方式
  4. 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文件,生成兩個文件:

  1. all-classes.js 這個文件包含app自定義的所有類,,這個文件沒有壓縮可以方便調(diào)試,,在我們的例子這個文件是空的,因為Hello Ext應(yīng)用沒有任何自定義class
  2. 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>