环境设置
编辑教程环境设置
在线设置ExtJS编程环境,以便可以在线编译和执行所有可用的示例。
请尝试以下示例:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></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 href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
您将在app.js文件中保留ExtJS应用程序代码。
CDN设置
CDN是内容交付网络,您不需要下载Ext JS库文件,您可以直接添加ExtJS的CDN链接到您的程序,如下所示:
<html>
<head>
<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
热门编辑
因为它是一个用于开发Web应用程序的JavaScript框架,在我们的项目中,我们将有HTML,JS文件和编写您的Ext JS程序,您将需要一个文本编辑器:
记事本:在Windows机器上,您可以使用任何简单的文本编辑器,如记事本,记事本++,sublime ,也可以使用我们的jsrun在线编辑器。
Eclipse:是由Eclipse开源社区开发的一个IDE,可以从http://www.eclipse.org/下载。
浏览器
Ext JS支持跨浏览器兼容性,它支持所有主要浏览器:
- IE 6及以上
- Firefox 3.6及更高版本
- Chrome10及更高版本
- Safari 4及以上
- Opera 11及以上
可以使用任何浏览器运行Ext JS应用程序。
![](http://cdns.jsrun.net/avatar/default.png)
选择支付方式:
![支付宝](/res/css/img/alipay.png)
![微信](/res/css/img/wxpay.png)
![支付宝](/res/css/img/alipay.png)
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间