Extjs6.2 第一堂课 HelloWorld

1. 第一堂课

1.1. 下载ext-6.2.0-gpl.zip

下载地址： [(https://www.sencha.com/legal/gpl/)]

步骤一：打开网站后，依次添加邮件地址，选择国家和下载的项目，最后点击 DOWNLOAD SDK。

提示：邮箱最好别用QQ邮箱，因为QQ邮箱收不到邮件。

图 1 信息填写页面

步骤二：点击DOWNLOAD SDK后，会显示下面的信息提示页面，下载的链接会发送到你刚刚填写的邮箱。

图 2 信息提示页面

步骤三：登录邮箱，会看到Sencha团队发的邮件，邮件的底部有个Download按钮，点击就会开始ext-6.2.0-gpl.zip的下载。

图 3 Sencha 发送的邮件

图 4下载页面

1.2. 写ext6.2的第一个程序Hello World

提示：这里我用的开发工具是WebStorm。

步骤一：新建一个Empty Project。

图 5 新建项目

图 6 建好的项目

步骤二：将刚刚下载的ext-6.2.0-gpl解压后，会看到如下图 7的目录结构，现在我们只需关注ext-bootstrap.js文件和build目录。

图 7 extjs6.2 目录结构

步骤三：在项目中新建如下图的目录结构，将减压后的相应文件复制到项目里面。

图 8 项目目录结构

步骤四：新建一个html文件，并在HTML文件中引入CSS样式文件和JS文件

图 9 HTML文件

步骤五：写Hello World 代码

<script>
    Ext.onReady(function () {
        Ext.MessageBox.alert("提示","Hello World！");
    });
</script>

步骤六：运行程序，会看到如下界面

图 10 Hello World 界面