1.1 瀏覽器
Ext JS 4 支援從IE6到Google Chrome 最新版幾乎所有的主流瀏覽器。但是對於開發而已，使用以下瀏覽器可以很方便的進行調試。
Google Chrome 10+
Apple Safari 5+
Mozilla Firefox 4+(with Firebug)
1.2 Ext JS4 開發套件下載
http://www.sencha.com/products/extjs/download/
可以下載基於GPL開源協議的開發包。(目前的最新版是ext-4.2.1.883)
2. 應用程式結構2.1 基本結構
推薦的Ext JS 的應用程式結構如下（非強制使用）
- appname - app - namespace - Class1.js - Class2.js - ... - extjs - resources - css - images - ... - app.js - index.htmlapp -- 放置自己定義的類， 命名規格需遵循類的命名規則
extjs -- Ext JS 4 開發套件的檔案
resources -- 附加的CSS , image 和 xml , JSON問檔案。
index.html - 入口檔案
app.js -- 包含應用程式邏輯。
2.2 執行個體
1) 建立以下目錄結構
- helloext - app.js - index.html - extjs2) 解壓下載的Ext JS4 的zip 包，放入 extjs 的目錄下
3) 編輯index.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-debug.js"></script> <script type="text/javascript" src="app.js"></script></head><body></body></html>4) app.js內容如下
Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { title: 'Hello Ext', html : 'Hello! Welcome to Ext JS.' } ] }); }});5) 查看效果
可以直接瀏覽器開啟index.html, 也可以放入web server 通過 http url 方式查看。
注意;
以上例子在Firefox 下是正常的，但是在IE和Chrome 確無法顯示。原因和解決方案如下描述。
3. 動態載入使用 Chrome Delveloper Tools 查看原因(F12)
原因是Ext JS4 有一個新的特性就是動態載入。
就是需要的時候才去載入相應的 js 資源。 比如。這裡要建立一個 Ext.container.Viewport， 首先要找Ext.container.Viewport 是否已經定義過， 如果沒定義就找相關的js去載入。但是，載入是有一個時間延時的，如果在執行個體之前還沒有載入完定義的話， 就會出錯。
解決此問題的辦法是在 app.js 前加上：
Ext.require('Ext.container.Viewport');
意思很簡單，就是先聲明定義好。
你可能會問？ 為什麼使用Ext JS 3 的時候不需要使用 reuqire 就可以 work, Ext JS 4 是否也有那種用法？
當然有， 注意在 index.html 匯入的是：
<script type="text/javascript" src="extjs/ext-debug.js"></script>
如果換成：
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
就不需要使用require 了， 這種方式是一次把所有的Class 全部定義好。
這就是 Ext JS4 的新功能， 動態載入， 只載入一些核心的Class, 其他的通過 require 的方式動態載入。
好處就是效能的提升了^^
如何使用動態載入的方式？
在解壓包了可以看到如下檔案：
ext.js -- 最小化的Ext JS核心類，其他的類通過動態載入方式。
ext-all.js-- 一次載入完所有的類。
ext-debug.js
ext-all-debug.js
debug 檔案的差別是未經壓縮的，用於開發和調試用的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
