Ext.js 环境设置

Extjs

Extjs 教程 Ext.js 概述 Ext.js 环境设置 Ext.js 命名约定 Ext.js 架构 Ext.js 第一个程序 Ext.js Class 系统 Ext.js 集装箱 Ext.js 布局 Ext.js 组件 Ext.js 拖放 Ext.js 自定义事件和监听器 Ext.js 数据 Ext.js 字体 Ext.js 风格 Ext.js 图像 Ext.js 本地化 Ext.js 可访问性 Ext.js 调试代码 Ext.js 方法

Ext.js 环境设置

尝试在线选项

我们已经在线设置了ExtJS编程环境，以便您可以在线编译和执行所有可用的示例。它给你对你正在阅读的信心，并使您能够使用不同的选项验证程序。随意修改任何示例并在线执行。

请尝试以下示例:

<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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>

本地环境设置

本节将指导您如何在机器上下载和设置Ext JS。请按照步骤设置环境。

正在下载库文件

从sencha https://www.sencha.com下载Ext JS库文件的试用版本。您将从您的注册邮件ID上的网站获取试用版，这将是一个名为ext-6.0.1-trial的压缩文件夹。

解压缩文件夹，你会发现各种JavaScript和CSS文件，你将包括在我们的应用程序。主要包括以下文件:

您可以在文件夹\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build下找到的（1）Javascript文件 JS文件是:

文件和描述
ext.js 这是核心文件，其中包含运行应用程序的所有功能。
ext-all.js 此文件包含在文件中没有注释的所有缩小的代码
ext-all-debug.js 这是ext-all.js的未分级版本，用于调试目的。
ext-all-dev.js 此文件也未分级，用于开发目的，因为它包含所有注释和控制台日志，以检查任何错误/问题
ext-all.js 这个文件用于生产目的，主要是因为它比任何其他小得多。

您可以将这些文件添加到您的项目JS文件夹，或者您可以给出文件驻留在系统中的直接路径。

（2）CSS文件有多个基于主题的文件，您可以在文件夹\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build \\ classic \\ theme-classic \\ resources \\ theme-classic-all.css

如果我们要使用桌面应用程序，那么我们可以使用文件夹\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build \\ classic下的经典主题
如果我们要使用移动应用程序，那么我们将使用现代主题，可以在文件夹\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build \\ modern下找到

这些库文件将添加到Ext JS应用程序中，如下所示:

<html>
   <head>
      <link rel = "stylesheet" type ="text/css" href= "..\ext-6.0.1-trial\ext-6.0.1uild\classic\theme-classic\resources\theme-classic-all.css" />
      <script type ="text/javascript" src = "..\ext-6.0.1-trial\ext-6.0.1uild\ext-all.js" > </script>
      <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

您将在app.js文件中保留ExtJS应用程序代码。

CDN设置

CDN是内容交付网络，您不需要下载Ext JS库文件，您可以直接添加ExtJS的CDN链接到您的程序，如下所示:

<html>
   <head>
      <link rel = "stylesheet" type ="text/css" href= "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      <script type ="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js" > </script>
      <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

浏览器

Ext JS支持跨浏览器兼容性，它支持所有主要浏览器：

IE 6及以上

Firefox 3.6及更高版本

Chrome10及更高版本

Safari 4及以上

Opera 11及以上

您可以使用任何浏览器运行Ext JS应用程序。

上一篇:Ext.js 概述

下一篇:Ext.js 命名约定

我要发贴

Extjs