ExtJs5.0在WebStorm上的使用之入门教程（一）编写第一个网页 HelloExt

最新推荐文章于 2023-02-04 12:13:50 发布

weixin_30868855

最新推荐文章于 2023-02-04 12:13:50 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发工具前端 ViewUI

原文链接：http://www.cnblogs.com/fifteen718/p/9533972.html

本文介绍如何使用WebStorm11.0.3和ExtJS 5.0.0-gpl搭建前端开发环境，通过一个简单的示例展示如何创建并运行一个包含弹窗消息的ExtJS应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，必须声明一下笔者使用的软件版本：

前端开发工具：WebStorm 11.0.3

辅助插件：ext-5.0.0-gpl

以上工具包括下面的代码我已经打包上传在此处了：点击打开链接

先上代码，再废话：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> HelloExt </title>
    <script type="text/javascript" src="ext5.0.0/build/examples/shared/include-ext.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./ext5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">-->
    <!--<script type="text/javascript" src="./ext5.0.0/ext-all.js"></script>-->
    <!--<script type="text/javascript" src="./ext5.0.0/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>-->
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.MessageBox.alert('标题', 'Hello Ext!');
        });
    </script>
</head>
<body>
<!--
说明：
(1)Ext.onReady():ExtJS Application的入口...就相当于Java或C#的main函数.
(2)Ext.MessageBox.alert()：弹出对话框。
-->
这是正文。
</body>
</html>

运行结果如下：

其中，注释掉的那三行代码就相当于上面的那一行代码，即

<pre name="code" class="html">  <script type="text/javascript" src="ext5.0.0/build/examples/shared/include-ext.js"></script>

之所以用这一行代码取代下面的三行代码，是因为

1、那一行代码的js文件里面会自动生成所需的那三个文件

2、节省代码量

3、那三行代码是我网上查找到的方法，但是根本运行不了，不知道是我路径出错了还是咋滴，如有大神知道原因的话烦请留言告知，谢谢！

关于ExtJs的使用，每个版本的文件路径不同，其中的src代码自然也是不一样的，所以很多例子一到自己本地运行就出错是很正常的现象。所以我在本文开头就有说明笔者使用的版本类型，还需再次重视之。

关于WebStorm上部署ExtJs那就更简单了，并不需要网上说的在“设置”里面添加“JavaScript”的“Libraries”，也不需要下载什么Tomcat服务器。而是只要将解压出来的整个ext5.0.0文件复制到工程文件夹中即可。位置如下：

转载于:https://www.cnblogs.com/fifteen718/p/9533972.html