Ext JS 4.2.0文档翻译：入门，Getting Started

Ext JS 4中有一个载入系统，可以动态地载入那些在妳的程序中必需的JavaScript资源。在我们这个示例中， Ext.create 创建了一个 Ext.container.Viewport 实例。当调用 Ext.create 时，载入系统首先会检查 Ext.container.Viewport 是否已经被定义了。如果它还未被定义，则，载入系统会在实例化这个视口对象之前先尝试载入包含着 Ext.container.Viewport 代码的JavaScript 文件。在我们这个示例里，Viewport.js这个文件被成功地载入了，但是，载入系统检测到它是以一种不那么优化的方式被载入的。因为我们是直到需要一个 Ext.container.Viewport 实例的时候才载入Viewport.js 的，所以，在成功载入那个文件之前，代码是暂停执行的，这就引起了一个小的延迟。如果我们多次调用Ext.create的话，这种延迟还会累积起来，因为，在载入每个文件时，程序都要等待，然后再载入下一个。

为了解决这个问题，我们可以在调用 Ext.application 的代码之前加入一行：

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

这会确保，包含着 Ext.container.Viewport 的代码的文件会在程序运行之前载入。这样，妳再刷新页面，就不会再看到 Ext.Loader 警告了。

2.3 库包含方法

当妳将所下载的Ext JS 4解压时，会看到以下文件：

1. ext-debug.js - 这个文件只应当在开发时使用。它提供了可用于维持运行的最少量的核心Ext JS类。任何附加的类都应当按照之前所说的方式作为单独的文件动态载入。
2. ext.js - 功能与ext-debug.js一样，不过是最小化了，专门用于实际产品的。它被设计为与妳的程序的app-all.js文件配套使用。（参考小节3）
3. ext-all-debug.js - 这个文件中包含着整个Ext JS库。这个文件可用于缩短妳在最初的学习曲线，不过，在大部分的实际程序开发过程中还是应当优先使用ext-debug.js。
4. ext-all.js – 这是ext-all-debug.js的最小化版本，可用于实际的产品环境，不过，并不建议使用这个文件，因为大部分程序都不会用到它所包含的所有类。我们建议的做法是，按照小节3 里面说明的步骤创建一个专门用于妳的产品环境的自定义版本。

3. 部署

新加入的Sencha SDK工具（这里下载）使得妳可以比以前更容易地部署任何Ext JS 4程序了。这些工具使得妳可以生成一个JSB3（JSBuilder文件格式）文件，它是一份关于所有JavaScript 代码之间依赖关系的清单，然后创建一个自定义的发布版本，里面只包含妳的程序所需要的那些代码。

当妳安装好了SDK工具之后，打开一个终端窗口，切换到妳的程序所在的目录。

cd path/to/web/root/helloext

在这里，妳只需要运行几条简单的命令。第一条命令会生成一个JSB3文件：

sencha create jsb -a index.html -p app.jsb3

如果妳的程序是使用动态的服务器端语言（例如PHP、Ruby等等）开发的，那么，妳可以使用妳的程序的实际网址来替换掉index.html：

sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3

这条命令会扫描妳的index.html文件，找到被这个程序所使用的所有框架文件及程序文件，然后创建一个名为app.jsb3 的JSB 文件。把JSB3 文件的生成作为一个单独的步骤，使得我们可以在构建之间修改一下这个app.jsb3文件——如果妳有一些自定义的资源要复制的话这就狠有用了，但是在大部分情况下我们可以直接进行下一步，使用第二条命令来构建这个程序：

sencha build -p app.jsb3 -d .

这条命令会根据JSB3 文件来创建2个文件：

1. all-classes.js - 这个文件中包含了妳的程序中所有的类。它没有被最小化，所以可以用来对已构建的程序进行调试。在我们的这个示例中，此文件是空的，因为我们的"Hello Ext"程序中不包含任何类。
2. app-all.js - 这个文件是将妳的程序最小化并且加上所有必需的Ext JS类之后的结果。它是由all-classes.js + app.js组成的最小化及产品用的版本。

一个Ext JS程序，在它的产品版本中，需要有一个单独的index.html文件。一般情况下，妳应当在构建过程或者服务器端的逻辑中处理这一点，不过，目前我们就直接在helloext目录中创建一个新的文件index-prod.html:

<html>

<head>

<title>Hello Ext</title>

</head>

</html>

注意，ext-debug.js已经被ext.js代替，app.js已经被app-all.js代替。如果妳此时用浏览器打开 http://localhost/helloext/index-prod.html，就会看到"Hello Ext"程序的产品用版本。

未知美人

Mikie Hara

未知美人

Your opinions

Your name:

Email:Website url:Opinion content:

- no title specified

HxLauncher: Launch Android applications by voice commands