• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Ext.js 环境设置

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

尝试在线选项

我们已经在线设置了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>

 注:本手册里所有的在线运行代码都使用了如上的CDN,在某些情况下CDN加载较慢会导致在线运行代码的效果展示较慢或者不展示(如果CDN失效的话),这里小编建议使用本地环境开发避免这种情况!如果发现CDN失效,请及时通过纠错进行反馈!

热门编辑

因为它是一个用于开发Web应用程序的JavaScript框架,在我们的项目中,我们将有HTML,JS文件和编写您的Ext JS程序,您将需要一个文本编辑器。 市场上甚至有多个IDE可用。 但现在,您可以考虑以下之一:


记事本:在Windows机器上,您可以使用任何简单的文本编辑器,如记事本(推荐用于本教程),记事本++,sublime。


Eclipse:是由Eclipse开源社区开发的一个IDE,可以从

http://www.eclipse.org/

下载。


浏览器

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


IE 6及以上


Firefox 3.6及更高版本


Chrome10及更高版本


Safari 4及以上


Opera 11及以上


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



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Ext.js 命名约定发布时间:2022-01-29
下一篇:
Ext.js 概述发布时间:2022-01-29
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap