Ext JS 5 （一）准备篇

最新推荐文章于 2021-04-02 09:10:04 发布

原创最新推荐文章于 2021-04-02 09:10:04 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #extjs5

sencha 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了ExtJS 5的基本安装和配置流程，并通过一个简单的Hello World示例演示了如何创建一个基本的应用程序。此外，文章还概述了ExtJS的不同版本及其用途。

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

因为工作原因，接触extjs 有两年多了。从3.X到4.X，如今6都已经出来了。无奈extjs从5开始抛弃了IE8以下的版本，在实际的项目中暂时还不能应用，但是并不能影响我学习它的热情。
而且不得不说的是虽然MVC从4.X就开始引入了，但是我们还是Ext.onReady()这样用。
这也算是为什么要在研究一遍Extjs5的原因。
因为目前extjs6还在公测，而且它把extjs和sencha touch融为一体。所以还是先搞明白extjs5吧。

下载

现在的最新版本是extjs5.1.0
官网的下载可能需要填写一些信息，它把适用版本下载地址发到你的邮箱，你可以试用30天。
官网试用下载地址
之前提到了MVC 模式，Sencha提供了一个Sencha Cmd 工具，这个可以帮你生成一个采用MVC模式架构好的工程。
下载的extjs解压就可以。Cmd的安装也很简单。
生成的方法也很简单，命令行模式，到你刚刚下载好的extjs目录内，
然后执行

sencha generate app -ext MyApp ./app

就是在./app的路径下生成一个叫MyApp的项目。

Hello World！

但是我们最好还是从头写起，而且并不是所有的项目都把view单独作为一个工程。
司空见惯Hello World！
建一个空目录 exthello
在exthello中创建一个build目录。找到下载的extjs里的ext-5.1.0\build\路径下的packages文件夹整个粘过来，以及这个路径下的ext-all.js，其他的我们暂时都不需要。
在exthello下创建index.html 和app.js两个文件
最后目录结构如下：
这里写图片描述

在index.html中写下面的内容：

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Ext JS!</title>
        <link rel="stylesheet" type="text/css" href="/{SDKLocation}/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script type="text/javascript" src="/{SDKLocation}/build/ext-all.js"></script>
        <script type="text/javascript" src="/{SDKLocation}/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

        <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

app.js中加入下面的代码：

Ext.application({
    name   : 'MyApp',

    launch : function() {

        Ext.create('Ext.Panel', {
            renderTo     : Ext.getBody(),
            width        : 200,
            height       : 150,
            bodyPadding  : 5,
            title        : 'Hello World',
            html         : 'Hello <b>World</b>...'
        });

    }
});