![codecamp](https://atts.w3cschool.cn/attachments/image/20230811/1691741920856601.png)
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="stylesheet" />
<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>
注:初次使用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应用程序。