2。應用程序結(jié)構(gòu)
2.1基本結(jié)構(gòu)
雖然沒有強制性的，下面列出的所有建議，應被視為最佳實踐指引，讓您的應用程序條理清楚，可擴展性和可維護性。
下面是一個推薦的目錄結(jié)構(gòu) 分機 JS應用程序：
- appname
- app
- namespace
- Class1.js
- Class2.js
- ...
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
APPNAME 是一個目錄，包含所有的應用程序的源文件應用程序 包含所有的類，其命名方式應該遵循上市公約 類系統(tǒng) 指導EXTJS 包含 分機 JS 4 SDK文件資源 包含額外的CSS和圖像文件這些都是負責的外觀和感覺的應用，以及其他（XML，JSON等），靜態(tài)資源的index.html 是入口點的HTML文件app.js 包含應用程序的邏輯
不要擔心創(chuàng)建此刻所有這些目錄?，F(xiàn)在就讓我們專注于創(chuàng)造最少量的代碼需要得到 分機 JS應用程序啟動和運行。
要做到這一點，我們將創(chuàng)建一個基本的“Hello World” 分機 JS應用程序稱為“Hello EXT”。首先，創(chuàng)建以下目錄中的Web根目錄和文件。
- helloext
- app.js
- index.html
然后解壓縮 分機 JS 4 SDK的目錄名為 EXTJS 在 helloext 目錄中
一個典型的 分機 JS應用是包含在一個單一的HTML文件 - 的index.html。打開 的index.html 并插入下面的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>
EXTJS /資源/ CSS / EXT - all.css 包含所有的樣式信息的整個架構(gòu)需要EXTJS / EXT - debug.js 包含了最小集 分機 JS 4核心類庫app.js 將包含您的應用程序代碼
現(xiàn)在你就可以編寫應用程序代碼。打開app.js并插入下面的JavaScript代碼：
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
現(xiàn)在打開你的瀏覽器并導航到 http://localhost/helloext/index.html。你應該看到一個標題包含文本“Hello EXT”和“歡迎”面板中的主體區(qū)域消息欄面板。
2.2動態(tài)加載
打開瀏覽器開發(fā)工具，并單擊控制臺選項?，F(xiàn)在刷新你好分機應用。您應該看到在控制臺看起來像這樣的警告：
Ext JS的4只來動態(tài)加載的JavaScript資源需要運行你的應用程序與系統(tǒng)。
在我們的例子 Ext.create 創(chuàng)建一個實例 Ext.container.Viewport。當 Ext.create 被稱為加載器會先檢查，看看是否 Ext.container.Viewport 已定義。
如果是不確定的加載程序?qū)L試加載JavaScript文件包含的代碼 Ext.container.Viewport 前視口對象的實例。在我們的例子中 Viewport.js 文件被加載成功，但裝載機檢測
該文件被裝載在低于最佳方式。由于我們是加載 Viewport.js 文件只有一個實例 Ext.container.Viewport 被請求時，代碼的執(zhí)行被停止，直到該文件已經(jīng)加載成功，引起了短暫的延遲。
這種延遲會加劇，如果我們有幾個要求Ext.create，因為應用程序會為每個文件之前加載等待下一個請求。
為了解決這個問題，我們可以調(diào)用此之上添加一行代碼來 Ext.application:
Ext.require（'Ext.container.Viewport'）;
這將確保該文件包含代碼 Ext.container.Viewport 加載應用程序之前運行。你應該再也看不到 Ext.Loader 警告當您刷新頁面。
2.4圖書館共享的方法
當你解壓縮 分機 JS 4下載，你會看到以下文件：
-
EXT - debug.js - 此文件僅適用于在開發(fā)過程中使用。它提供了核心的最小數(shù)目 分機 JS類所需的啟動和運行。任何額外的類應該是動態(tài)加載作為單獨的文件作為證明以上。
-
ext.js - 相同 EXT - debug.js 但縮小的用于生產(chǎn)。為了在您的應用程序結(jié)合使用的 APP - all.js 文件。 （見第 3)
-
EXT -全debug.js - 該文件包含整個 分機 JS庫。這可以縮短你的最初的學習曲線有幫助，但是 EXT - debug.js 是首選在大多數(shù)情況下，實際的應用開發(fā)。
-
EXT - all.js - 這是一個縮小的版本 EXT -全debug.js 可在生產(chǎn)環(huán)境中使用，但是，它是不推薦，因為大多數(shù)應用程序不會使所有的類，它包含使用。相反，它建議您為您的生產(chǎn)環(huán)境，如自定義生成一節(jié)所述 3.
3。部署
新推出的煎茶SDK工具（這里下載）作出的任何部署 分機 JS 4應用程序比以往更容易。這些工具允許您生成的所有JavaScript的依賴性在一個JSB3（JSBuilder文件格式）文件的形式表現(xiàn)，并創(chuàng)建一個只包含自定義生成的代碼，你的應用需求。
一旦你安裝了SDK工具，打開一個終端窗口并導航到應用程序的目錄。
cd路徑/到/網(wǎng)站/的根/helloext
從這里你只需要運行一個簡單的命令夫婦。第一個產(chǎn)生JSB3文件：
煎茶創(chuàng)建JSB -A股指數(shù).HTML -p應用.jsb3
有關(guān)的動態(tài)服務器端，如PHP，紅寶石，ASP等語言之上的應用程序，您可以簡單地更換 的index.html 與您的應用程序的實際網(wǎng)址：
煎茶創(chuàng)建JSB -一個HTTP:/ /本地主機/ helloext / index.html的- P app.jsb3
這將掃描 的index.html 所有框架和應用程序文件，這些文件實際上是由應用程序使用，然后創(chuàng)建一個文件名為JSB app.jsb3。生成JSB3首先給我們一個機會來修改生成 app.jsb3 在建設(shè) - 這可以是有益的，如果你有自定義的資源復制，但在大多數(shù)情況下我們可以立即著手建設(shè)第二個命令的應用程序：
煎茶建設(shè) -p應用.jsb3 -ð .
這將創(chuàng)建文件的基礎(chǔ)上JSB3 2個文件：
-
全classes.js - 此文件包含應用程序的所有類。這不是縮小的所以是非常適合您構(gòu)建的應用程序調(diào)試問題非常有用。在我們的例子中這個文件是空的，因為我們的“Hello EXT”應用程序不包含任何類。
-
APP - all.js - 此文件是一個應用程序的最小化構(gòu)建再加上所有 分機 JS類需要運行它。這是縮小的，生產(chǎn)就緒版 全classes.js + app.js.
一個 分機 JS應用程序?qū)⑿枰粋€單獨的 的index.html 為應用程序的生產(chǎn)版本。您通常會在你的構(gòu)建過程處理或服務器端邏輯這一點，但現(xiàn)在我們只創(chuàng)建一個新文件 helloext 所謂目錄 指數(shù)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-debug.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
請注意 EXT - debug.js 已被替換 ext.js，和 app.js 已被替換 APP - all.js。如果您導航到 http://localhost/helloext/index-prod.html 在您的瀏覽器，你應該看到的“你好分機”應用程序的生產(chǎn)版本。
|
