Ext.js 环境设置

2022-05-19 16:19 更新

本节将指导您如何在机器上下载和设置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文件，就能看到效果：