免費(fèi)AI編程助手
Ext.js 環(huán)境設(shè)置
本節(jié)將指導(dǎo)您如何在機(jī)器上下載和設(shè)置Ext JS。請按照步驟設(shè)置環(huán)境。
正在下載庫文件
從sencha https://www.sencha.com下載Ext JS庫文件的試用版本 。 您將從您的注冊郵件ID上的網(wǎng)站獲取試用版，這將是一個名為ext-6.0.0-trial的壓縮文件夾。
extjs6.0版本已經(jīng)過于老舊，官網(wǎng)可能找不到對應(yīng)的庫文件，只能使用CLI進(jìn)行學(xué)習(xí)，但本手冊以庫文件學(xué)習(xí)為主。以下是extjs6.0版本的百度網(wǎng)盤鏈接：
百度網(wǎng)盤下載地址:
http://pan.baidu.com/s/1qWGcoxe
版本號：ext-6.0.0
本教程的所有實例皆基于本版本進(jìn)行介紹。
注：網(wǎng)盤內(nèi)下載的壓縮文件夾名為ext-6.0.0-gpl，解壓后會有一個名叫ext-6.0.0的文件夾，等同于試用版的ext-6.0.0-trial文件夾（extjs6版本的小版本號可能會有所區(qū)別(比如6.0.1），大體上并不影響目錄結(jié)構(gòu)和展現(xiàn)效果）。
解壓縮文件夾，你會發(fā)現(xiàn)各種JavaScript和CSS文件，你將包括在我們的應(yīng)用程序。 主要包括以下文件:
您可以在文件夾? ext-6.0.0/build?下找到的:
（1）Javascript文件
JS文件是:
| 文件和描述 |
|---|
| ext.js
這是核心文件，其中包含運(yùn)行應(yīng)用程序的所有功能。 |
| ext-all.js
此文件包含在文件中沒有注釋的所有縮小的代碼 |
| ext-all-debug.js
這是ext-all.js的未分級版本，用于調(diào)試目的。 |
| ext-all-dev.js
此文件也未分級，用于開發(fā)目的，因為它包含所有注釋和控制臺日志，以檢查任何錯誤/問題 |
| ext-dev.js
這個文件用于生產(chǎn)目的，主要是因為它比任何其他小得多。 |
您可以將這些文件添加到您的項目JS文件夾，或者您可以給出文件駐留在系統(tǒng)中的直接路徑。
（2）CSS文件
有多個基于主題的文件，您可以在文件夾 ??ext-6.0.0/build/classic/?下找到多套主題
|
theme-base |
這個包是所有其他主題的基礎(chǔ)主題，是唯一沒有父主題的主題。 它包含Ext JS組件和布局正常工作絕對必需的最低限度的一組CSS規(guī)則。 "theme-base"中的樣式規(guī)則在派生主題中不可配置。 您應(yīng)該避免覆蓋由此主題創(chuàng)建的任何樣式規(guī)則。 |
|
theme-neutral |
theme-neutral擴(kuò)展了"theme-base"，并且包含絕大多數(shù)可配置的風(fēng)格規(guī)則。 可用于配置Ext JS組件外觀的大多數(shù)變量都在"theme-neutral"中定義。 這些是您的自定義主題可以覆蓋的變量。 |
|
theme-neptune |
現(xiàn)代(Modern)的沒有邊框(border)的主題，擴(kuò)展"theme-neutral" |
|
theme-neptune-touch |
theme-neptune-touch是用于觸摸的主題. 繼承自 "theme-neptune"，這個主題包括在平板電腦上使用的"touch-sizing"包 |
|
theme-triton |
使用字體圖標(biāo)的(font-icons)現(xiàn)代(Modern)主題. 繼承自 "theme-neptune" |
|
theme-crisp |
簡約主題。擴(kuò)展"theme-neptune". |
|
theme-crisp-touch |
基于theme-crisp的觸摸主題。 擴(kuò)展"theme-crisp"。 這個主題包括在平板電腦上使用的"touch-sizing"軟件包 |
|
theme-classic |
經(jīng)典的藍(lán)色Ext JS主題。 擴(kuò)展"theme-neutral" |
|
theme-gray |
灰色主題。擴(kuò)展 "theme-classic". |
|
theme-aria |
輔助功能主題。 擴(kuò)展"theme-neptune"。 這個主題包括"aria"包 |
以下內(nèi)容以經(jīng)典藍(lán)色主題為例（theme-classic），我們需要引用的css文件在?ext-6.0.0/build/classic/?文件夾下的?theme-classic?文件夾下的?resources?文件夾下的?theme-classic-all.css?，其完整的相對路徑為：
ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css這些庫文件將添加到Ext JS應(yīng)用程序中，如下所示:
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="./ext-6.0.0/build/ext-all.js"></script>
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
您將在app.js文件中保留ExtJS應(yīng)用程序代碼（但接下來的示例為了方便展示，將app.js的代碼寫入html中，讀者可以自行拆分）。
CDN設(shè)置
CDN是內(nèi)容分發(fā)網(wǎng)絡(luò)，您不需要下載Ext JS庫文件，您可以直接添加ExtJS的CDN鏈接到您的程序，如下所示:
<html>
<head>
<link rel="external nofollow" target="_blank" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script>
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
注：初次使用cdn，請前往https://cdnjs.com/libraries/extjs/6.0.0查明需要的文件所對應(yīng)的連接！
第一個實例
任何編程語言的第一個實例都是以最簡單的helloworld作為一個開始，extjs也不例外。請根據(jù)本實例一步一步配置好環(huán)境，接下來的內(nèi)容會用到相對路徑，如果文件夾配置失誤，會導(dǎo)致內(nèi)容無法正確展現(xiàn)！
第一步，新建一個項目文件夾，然后將庫文件放進(jìn)去（還記得嘛？下載后解壓文件名為ext-6.0.0的文件夾）（以下為小編的案例，新建的項目文件夾名為extjstest）
第二步，在項目文件夾下新建一個html文件，并輸入以下代碼：
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 100,
width: 200,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
});
</script>
</head>
<body>
<div id="helloWorldPanel"></div>
</body>
</html>使用瀏覽器打開這個html文件，就能看到效果：
熱門的編輯器
因為它是一個用于開發(fā)Web應(yīng)用程序的JavaScript框架，在我們的項目中，我們將有HTML，JS文件和您編寫的Ext JS程序，您將需要一個代碼編輯器。 市場上有很多IDE可供選擇。 但現(xiàn)在，您可以考慮以下之一：
記事本：在Windows機(jī)器上，您可以使用任何簡單的文本編輯器，如記事本（推薦用于本教程），notepad++，sublime。
Eclipse：是由Eclipse開源社區(qū)開發(fā)的一個IDE，可以從http://www.eclipse.org/下載。
vscode：小編力薦?。。∷且粋€開源的多平臺支持的代碼編輯器，配合豐富的插件生態(tài)，可以做到極好的開發(fā)體驗！
瀏覽器
Ext JS支持跨瀏覽器兼容性，它支持所有主流瀏覽器：
- IE 6及以上
- Firefox 3.6及更高版本
- Chrome10及更高版本
- Safari 4及以上
- Opera 11及以上
您可以使用任何瀏覽器運(yùn)行Ext JS應(yīng)用程序。
更多建議：