免费AI编程助手
Ext.js 环境设置
本节将指导您如何在机器上下载和设置Ext JS。请按照步骤设置环境。
正在下载库文件
从sencha https://www.sencha.com下载Ext JS库文件的试用版本 。 您将从您的注册邮件ID上的网站获取试用版，这将是一个名为ext-6.0.0-trial的压缩文件夹。
extjs6.0版本已经过于老旧，官网可能找不到对应的库文件，只能使用CLI进行学习，但本手册以库文件学习为主。以下是extjs6.0版本的百度网盘链接：
百度网盘下载地址:
http://pan.baidu.com/s/1qWGcoxe
版本号：ext-6.0.0
本教程的所有实例皆基于本版本进行介绍。
注：网盘内下载的压缩文件夹名为ext-6.0.0-gpl，解压后会有一个名叫ext-6.0.0的文件夹，等同于试用版的ext-6.0.0-trial文件夹（extjs6版本的小版本号可能会有所区别(比如6.0.1），大体上并不影响目录结构和展现效果）。
解压缩文件夹，你会发现各种JavaScript和CSS文件，你将包括在我们的应用程序。 主要包括以下文件:
您可以在文件夹 ext-6.0.0/build下找到的:
（1）Javascript文件
JS文件是:
| 文件和描述 |
|---|
| ext.js
这是核心文件，其中包含运行应用程序的所有功能。 |
| ext-all.js
此文件包含在文件中没有注释的所有缩小的代码 |
| ext-all-debug.js
这是ext-all.js的未分级版本，用于调试目的。 |
| ext-all-dev.js
此文件也未分级，用于开发目的，因为它包含所有注释和控制台日志，以检查任何错误/问题 |
| ext-dev.js
这个文件用于生产目的，主要是因为它比任何其他小得多。 |
您可以将这些文件添加到您的项目JS文件夹，或者您可以给出文件驻留在系统中的直接路径。
（2）CSS文件
有多个基于主题的文件，您可以在文件夹 ext-6.0.0/build/classic/下找到多套主题
|
theme-base |
这个包是所有其他主题的基础主题，是唯一没有父主题的主题。 它包含Ext JS组件和布局正常工作绝对必需的最低限度的一组CSS规则。 "theme-base"中的样式规则在派生主题中不可配置。 您应该避免覆盖由此主题创建的任何样式规则。 |
|
theme-neutral |
theme-neutral扩展了"theme-base"，并且包含绝大多数可配置的风格规则。 可用于配置Ext JS组件外观的大多数变量都在"theme-neutral"中定义。 这些是您的自定义主题可以覆盖的变量。 |
|
theme-neptune |
现代(Modern)的没有边框(border)的主题，扩展"theme-neutral" |
|
theme-neptune-touch |
theme-neptune-touch是用于触摸的主题. 继承自 "theme-neptune"，这个主题包括在平板电脑上使用的"touch-sizing"包 |
|
theme-triton |
使用字体图标的(font-icons)现代(Modern)主题. 继承自 "theme-neptune" |
|
theme-crisp |
简约主题。扩展"theme-neptune". |
|
theme-crisp-touch |
基于theme-crisp的触摸主题。 扩展"theme-crisp"。 这个主题包括在平板电脑上使用的"touch-sizing"软件包 |
|
theme-classic |
经典的蓝色Ext JS主题。 扩展"theme-neutral" |
|
theme-gray |
灰色主题。扩展 "theme-classic". |
|
theme-aria |
辅助功能主题。 扩展"theme-neptune"。 这个主题包括"aria"包 |
以下内容以经典蓝色主题为例（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应用程序中，如下所示:
<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应用程序代码（但接下来的示例为了方便展示，将app.js的代码写入html中，读者可以自行拆分）。
CDN设置
CDN是内容分发网络，您不需要下载Ext JS库文件，您可以直接添加ExtJS的CDN链接到您的程序，如下所示:
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 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查明需要的文件所对应的连接！
第一个实例
任何编程语言的第一个实例都是以最简单的helloworld作为一个开始，extjs也不例外。请根据本实例一步一步配置好环境，接下来的内容会用到相对路径，如果文件夹配置失误，会导致内容无法正确展现！
第一步，新建一个项目文件夹，然后将库文件放进去（还记得嘛？下载后解压文件名为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文件，就能看到效果：
热门的编辑器
因为它是一个用于开发Web应用程序的JavaScript框架，在我们的项目中，我们将有HTML，JS文件和您编写的Ext JS程序，您将需要一个代码编辑器。 市场上有很多IDE可供选择。 但现在，您可以考虑以下之一：
记事本：在Windows机器上，您可以使用任何简单的文本编辑器，如记事本（推荐用于本教程），notepad++，sublime。
Eclipse：是由Eclipse开源社区开发的一个IDE，可以从http://www.eclipse.org/下载。
vscode：小编力荐！！！他是一个开源的多平台支持的代码编辑器，配合丰富的插件生态，可以做到极好的开发体验！
浏览器
Ext JS支持跨浏览器兼容性，它支持所有主流浏览器：
- IE 6及以上
- Firefox 3.6及更高版本
- Chrome10及更高版本
- Safari 4及以上
- Opera 11及以上
您可以使用任何浏览器运行Ext JS应用程序。
更多建议：