金城jc2507照片:自学EXTJS4笔记1

2。应用程序结构

2.1基本结构

虽然没有强制性的，下面列出的所有建议，应被视为最佳实践指引，让您的应用程序条理清楚，可扩展性和可维护性。下面是一个推荐的目录结构 分机 JS应用程序：

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html

• APPNAME 是一个目录，包含所有的应用程序的源文件
• 应用程序 包含所有的类，其命名方式应该遵循上市公约 类系统 指导
• EXTJS 包含 分机 JS 4 SDK文件
• 资源 包含额外的CSS和图像文件这些都是负责的外观和感觉的应用，以及其他（XML，JSON等），静态资源
• 的index.html 是入口点的HTML文件
• app.js 包含应用程序的逻辑

不要担心创建此刻所有这些目录。现在就让我们专注于创造最少量的代码需要得到 分机 JS应用程序启动和运行。要做到这一点，我们将创建一个基本的“Hello World” 分机 JS应用程序称为“Hello EXT”。首先，创建以下目录中的Web根目录和文件。

- helloext
    - app.js
    - index.html

然后解压缩 分机 JS 4 SDK的目录名为 EXTJS 在 helloext 目录中

一个典型的 分机 JS应用是包含在一个单一的HTML文件 - 的index.html。打开 的index.html 并插入下面的HTML代码：

• EXTJS /资源/ CSS / EXT - all.css 包含所有的样式信息的整个架构需要
• EXTJS / EXT - debug.js 包含了最小集 分机 JS 4核心类库
• app.js 将包含您的应用程序代码

现在你就可以编写应用程序代码。打开app.js并插入下面的JavaScript代码：

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

现在打开你的浏览器并导航到 http://localhost/helloext/index.html。你应该看到一个标题包含文本“Hello EXT”和“欢迎”面板中的主体区域消息栏面板。

2.2动态加载

打开浏览器开发工具，并单击控制台选项。现在刷新你好分机应用。您应该看到在控制台看起来像这样的警告：

Ext JS的4只来动态加载的JavaScript资源需要运行你的应用程序与系统。在我们的例子 Ext.create 创建一个实例 Ext.container.Viewport。当 Ext.create 被称为加载器会先检查，看看是否 Ext.container.Viewport 已定义。如果是不确定的加载程序将尝试加载JavaScript文件包含的代码 Ext.container.Viewport 前视口对象的实例。在我们的例子中 Viewport.js 文件被加载成功，但装载机检测该文件被装载在低于最佳方式。由于我们是加载 Viewport.js 文件只有一个实例 Ext.container.Viewport 被请求时，代码的执行被停止，直到该文件已经加载成功，引起了短暂的延迟。这种延迟会加剧，如果我们有几个要求Ext.create，因为应用程序会为每个文件之前加载等待下一个请求。

为了解决这个问题，我们可以调用此之上添加一行代码来 Ext.application:

Ext.require（'Ext.container.Viewport'）;

这将确保该文件包含代码 Ext.container.Viewport 加载应用程序之前运行。你应该再也看不到 Ext.Loader 警告当您刷新页面。

2.4图书馆共享的方法

当你解压缩 分机 JS 4下载，你会看到以下文件：

1. EXT - debug.js - 此文件仅适用于在开发过程中使用。它提供了核心的最小数目 分机 JS类所需的启动和运行。任何额外的类应该是动态加载作为单独的文件作为证明以上。

2. ext.js - 相同 EXT - debug.js 但缩小的用于生产。为了在您的应用程序结合使用的 APP - all.js 文件。 （见第 3)

3. EXT -全debug.js - 该文件包含整个 分机 JS库。这可以缩短你的最初的学习曲线有帮助，但是 EXT - debug.js 是首选在大多数情况下，实际的应用开发。

4. EXT - all.js - 这是一个缩小的版本 EXT -全debug.js 可在生产环境中使用，但是，它是不推荐，因为大多数应用程序不会使所有的类，它包含使用。相反，它建议您为您的生产环境，如自定义生成一节所述 3.

3。部署

新推出的煎茶SDK工具（这里下载）作出的任何部署 分机 JS 4应用程序比以往更容易。这些工具允许您生成的所有JavaScript的依赖性在一个JSB3（JSBuilder文件格式）文件的形式表现，并创建一个只包含自定义生成的代码，你的应用需求。

一旦你安装了SDK工具，打开一个终端窗口并导航到应用程序的目录。

cd路径/到/网站/的根/helloext

从这里你只需要运行一个简单的命令夫妇。第一个产生JSB3文件：

煎茶创建JSB -A股指数.HTML -p应用.jsb3

有关的动态服务器端，如PHP，红宝石，ASP等语言之上的应用程序，您可以简单地更换 的index.html 与您的应用程序的实际网址：

煎茶创建JSB -一个HTTP:/ /本地主机/ helloext / index.html的- P app.jsb3

这将扫描 的index.html 所有框架和应用程序文件，这些文件实际上是由应用程序使用，然后创建一个文件名为JSB app.jsb3。生成JSB3首先给我们一个机会来修改生成 app.jsb3 在建设 - 这可以是有益的，如果你有自定义的资源复制，但在大多数情况下我们可以立即着手建设第二个命令的应用程序：

煎茶建设 -p应用.jsb3 -ð .

这将创建文件的基础上JSB3 2个文件：

1. 全classes.js - 此文件包含应用程序的所有类。这不是缩小的所以是非常适合您构建的应用程序调试问题非常有用。在我们的例子中这个文件是空的，因为我们的“Hello EXT”应用程序不包含任何类。

2. APP - all.js - 此文件是一个应用程序的最小化构建再加上所有 分机 JS类需要运行它。这是缩小的，生产就绪版 全classes.js + app.js.

一个 分机 JS应用程序将需要一个单独的 的index.html 为应用程序的生产版本。您通常会在你的构建过程处理或服务器端逻辑这一点，但现在我们只创建一个新文件 helloext 所谓目录 指数prod.html:

请注意 EXT - debug.js 已被替换 ext.js，和 app.js 已被替换 APP - all.js。如果您导航到 http://localhost/helloext/index-prod.html 在您的浏览器，你应该看到的“你好分机”应用程序的生产版本。