Ext JS 4官方指南（一）——开始使用Ext JS 4

来源：互联网发布：淘宝视频下载专用工具编辑：程序博客网时间：2024/05/17 20:11

老大说年后项目要用到 Ext JS 4，以前又没用过，习惯啃文档的我只好去看官方文档了。话不多说，下面开始学习Ext JS 4！

1、前期准备

1）浏览器（LZ就准备了firefox,IE10）

2）Web Server （LZ用的是 tomcat）

3）Ext JS 4 SDK （LZ用的是ext-js-4.2.1）

到这里下载：http://www.sencha.com/products/extjs/download/ext-js-4.2.1/2281

2、应用结构

尽管不是强制性的，但以下所列都是经过深思熟虑的最好的方法，以让你的应用是有序且可扩展可维护的。
下面是一个被推荐的Ext JS 应用的目录结构：

-appname                    ---应用根目录，包含你应用的所有的源文件    -app                    ---此目录下放你自己的以 Class System 指南中所约定的命名风格命名的类。    -namespace            -class1.js            -class2.js            -...-extjs                       ---此目录包含Ext JS 4 SDK 文件    -resources               ---此目录包含一些可能用到的CSS和image文件，也包含一些静态资源（如xml，json等）    -css    -images    -...-app.js                          ---应用的逻辑-index.html                      ---应用的入口

2.1 下面开始一个简单的应用

依然是从 Hello World 开始。创建一个helloext应用，之后将解压的Ext JS 4 SDK放入helloext 目录，目前来说只需将SDK中的resources 文件夹和 ext-all-debug.js放入即可。

目录结构如下：

    - helloext        - extjs-4.2.1            - resources            - ext-all-debug.js        - app.js        - index.html

index.html 中代码：

<html><head>    <title>Hello Ext</title>    <link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />    <script type="text/javascript" src="ext-4.2.1/ext-all-debug.js"></script>    <script type="text/javascript" src="js/app.js"></script></head><body></body></html>

其中
1）resources/css/ext-all.css包含整个框架需要的所有样式信息。
2）ext-all-debug.js是一个压缩的包含Ext所有组件的类库集。
3）app.js包含你自己的应用的代码。

现在开始编写自己的 js 文件。app.js 中代码如下：

Ext.application({    name: 'HelloExt',    launch: function() {        Ext.create('Ext.container.Viewport', {            layout: 'fit',            items: [                {                    title: 'Hello Ext',                    html : 'Hello! Welcome to Ext JS.'                }            ]        });    }});

接下来就是验证效果的时候了，直接访问index.html，出现如下页面：
Hello Ext
一个简单的 100%*100% 的 Viewprot ，ok。Hello World 完成！

2.2 动态加载

Ext JS 4 自带一个动态加载 JavaScript 资源的系统，并且只在应用需要资源的时候系统才加载。

在上面的例子中， Ext.create 创建了一个 Ext.container.Viewport 的实例。

当 Ext.create 被调用的时候，Ext 资源加载器会首先检查 Ext.container.Viewport 是否定义，没有定义的话，加载器会在 viewport 对象实例化之前加载Ext.container.Viewport 的定义代码。

在以上例子中，Viewort.js被成功的加载，但是加载器发现它并没有以最佳方式加载（LZ不知道它是怎么发现的）。

因为它是动态加载的，所以当我们执行创建 Ext.container.Viewport 的代码时，代码会停止，直到Viewport.js 文件被加载完成，这会造成短暂的延迟。

在我们有多个 Ext.create 的时候，这种延迟将会加剧。因为应用需要等待，直到每个必需的文件都加载完成。

为了完善这一点，我们可以在 Ext.application 上面加上一行代码：

Ext.require('Ext.container.Viewport');

2.3 解压包中的几个文件

包中有以下几个文件（带有debug的都是用于开发调试使用）：
1）ext-debug.js ——这个文件应该仅在开发期使用。它提供了运行 Ext JS 所需要的最小数量的类库。任何额外的类都会进行如上所说的动态加载。

2）ext.js ——和 ext-debug.js 一样，但是是它是用在产品期的。这意味着可以和你的应用的 js 文件混合使用（见第三部分）

3）ext-all-debug.js ——这是整个框架的压缩版本。这可能有利于缩短我们的最初的学习曲线，无论怎样，它是我们开发时的首选文件。

4）ext-all.js ——和 ext-all-debug.js 一样，可以用在产品期。但是不推荐这样做，因为大多数应用不会用到它包含的所有功能。建议自定义自己的产品环境，这在第三部分有介绍。

3、部署

这部分涉及到Sencha Cmd，参见 Sencha Cmd。（Sencha Cmd 楼主也还没去看，不过这部分不会无伤大雅，毕竟这只是一个工具）

4、延伸阅读

1）类体系

2）MVC应用架构

3）布局和容器

4）数据交互

0 0