Extjs Guide学习笔记1------Getting Started

最新推荐文章于 2020-07-29 09:28:02 发布

roc08

最新推荐文章于 2020-07-29 09:28:02 发布

阅读量115

点赞数

分类专栏： extjs4 文章标签： extjs4 部署 sencha sdk build jsb3

本文链接：https://blog.csdn.net/roc08/article/details/84389477

版权

extjs4 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

[color=red][b][u]本文所有翻译均出于参考文献中所列，请支持原创作者，谢谢原创作者们[/u][/b][/color]
[b]Getting Started[/b]
[b]Contents[/b]
[list]
[*]1. Requirements
[*]2. Application Structure
[*]3. Deployment
[*]4. Further Reading
[/list]
[b]1. 要求[/b]
[b]1.1 浏览器[/b]
Ext JS 4 支持大多主流的浏览器（Ie6~chrome）,在开发时，建议选择以下几种浏览器(with debuger)
[list]
[*] Google Chrome 10+
[*] Apple Safari 5+
[*] Mozilla Firefox 4+ with the Firebug Web Development Plugin
[/list]
此教程基于Chrome最新版。如果你还没有安装Chrome,您需要花点时间安装下，再稍微熟悉Chrome的开发工具。

[b]1.2 Web 服务器[/b]
虽然使用Extjs4不是必须要安装一个本地web服务器的，但因为大多数浏览器对XHR访问本地的file协议做了限制，最好还是安装一个，这里推荐安装Apache HTTP Server.
[list]
[*] Instructions for installing Apache on Windows
[*] Instructions for installing Apache on Linux
[*] Mac OS X comes with a build in apache installation which you can enable by navigating to "System Preferences > Sharing" and checking the box next to "Web Sharing".
[/list]
验证安装是否可用，在浏览器中打开localhost. 会看到一个启动页面，说明server已经开装成功.

[b]1.3. Ext JS 4 SDK[/b]
下载 Ext JS 4 SDK.且解压到web根目录下名为extjs的目录. 如果你不确定web根目录在哪, 查看服务器手册. 你的web服务器根目录依赖你的操作系统,如果你使用的是Apache服务器，则目录位置如下:
[list]
[*] Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"
[*] Linux - "/var/www/"
[*] Mac OS X - "/Library/WebServer/Documents/"
[/list]
如果你安装成功，在浏览器中打开http://localhost/extjs/index.html .如果你看到Extjs4的欢迎界面，说明你已经安装成功.

[b]2. 应用的结构[/b]
[b]2.1 基本结构[/b]
虽然不是强制性的，下面所列建议，应视为最佳做法，更好的组织您的应用程序，保证更好的扩展性和可维护性。下面是Ext JS的应用程序推荐的目录结构

- appname     //存放全部源代码
    - app      //存放自定义类
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs      // extjs4 sdk目录
    - resources  //存放css和image也保含xml 和json等静态数据
        - css
        - images
        - ...
    - app.js    //应用程序逻辑代码
    - index.html  //主页

目录结构不一定同时建立完成.现在我们建立一个小的可运行的应用程序. 这里我们创建一个基本的演示应用起名叫"helloext". 首先建立如下的目录和文件。

- helloext
    - app.js
    - index.html

解压Extjs4到helloext下的extjs目录，一个典型的extjs应用包含在单页面中，入口页面index.html，打开index.html页面输入如下代码:

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

[list]
[*] extjs/resources/css/ext-all.css -----保含extjs框架所的有样式
[*] extjs/ext-debug.js ----extjs最小的可调式代码库
[*] app.js ---应用程序的代码
[/list]
下面开始写应用程序的代码，打开app.js输入如下JS代码:

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”标题且内容是"welcome"的panel.

[b]2.2 动态载入[/b]
打开Chrome 开发人员工具，单击Console选项.刷新页面，在Console中会看到一个警告信息.例如：
Extjs4引入了类的动态加载机制，运行时需要这个类了extjs才把它加载进来，在我们的例子中实例化 Ext.container.Viewport时，Ext会检查Ext.container.Viewport是否已经加载进来了，如果没有则需要加载包含这个类定义的Viewport.js文件，出现这个提示是因为Loader检测到这不是最优解，因为我们是动态加载的，程序会出现很小的延迟。如果多次create实例，会出现更长的延迟，因为应用程序一直在等待每一个文件加载进来。所以出现上上面的警告提示信息.
在 Ext.application这行上面加入如下代码，可以解决问题:

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

这样会确保应用运行前将Viewport加载进来，再刷新页面就不会出现这个警告了。

[b]2.3 库共享方法[/b]
在解压Extjs4时，你会看到如下文件:
[list]
[*] ext-debug.js ：开发时使用，提供了Extjs最小的核心功能，任何其他的功能都需要动态引入进来。
[*] ext.js：生产环境下使用，与ext-debug.js功能相同只是压缩了。
[*] ext-all-debug.js -此文件包含整个Ext JS库。这可以有助于缩短您最初的学习曲线，然而在大多数情况下，实际的应用程序开发的首选为ext- debug.js。
[*] ext-all.js -这是一个ext-all-debug压缩混淆的版本,可以在生产环境中使用，然而，这是不建议，因为大多数应用将不会使用它包含的所有类，推荐根据下文介绍的创建一个适合自己系统的定制版。
[/list]

[b]3. Deployment[/b]
最新的Sencha SDK Tools使部署任何Ext JS 4应用程序都比以往更容易。这个工具允许你生成一个所有具有依赖关系的JavaScript的清单，它是一个JSB3（JSBuilder文件格式）的文件，并且允许您创建一个自定义的build，它仅仅只包含了你的应用程序所需要的代码。
一旦你已经安装了这个SDK Tools，打开一个终端窗口并进入你的应用程序目录。

cd path/to/web/root/helloext

首先生成一个jsb3文件:

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

对于诸如PHP, Ruby, ASP,等应用, 将 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文件的文件：
[list]
[*]all-classes.js: 这个文件包含了您的应用程序的所有类。它不是压缩的，所以它有助于调试您的应用程序存在的问题。在我们的例子中，这个文件是空的，因为我们的"Hello Ext"应用程序中不包含任何类。
[*]app-all.js: 这个文件是运行应用程序所需要的最小构建，它包含了您的应用程序中的类和使用到的Ext JS的类。它是压缩了的产品版本，由all-classes.js和app.js组成。
[*]对于产品版本的应用程序，Ext JS需要一个单独的index.html。您可能通常在构建过程中或者服务器端逻辑中来处理这个问题。
[/list]
但是现在，我们在helloext目录下创建一个名为index-prod.html的新文件：

<html>
<head>
    <title>Hello Ext</title>

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

注意，ext-debug.js已经被ext.js代替，并且app.js被app-all.js代替。现在如果在你的浏览器中导航到http://localhost/helloext/index-prod.html, 你应该会看到"Hello Ext"应用程序的产品版本了。

[b]4. Further Reading[/b]
[list]
[*] Class System
[*] MVC Application Architecture
[*] Layouts and Containsers
[*] Working with Data
[/list]

[b]5. 参考资料（翻译出处）[/b]
http://www.cnblogs.com/longyg/archive/2012/11/20/2777849.html
http://blog.csdn.net/guoqingcun/article/details/7182193

roc08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs Guide学习笔记1------Getting Started

[color=red][b][u]本文所有翻译均出于参考文献中所列，请支持原创作者，谢谢原创作者们[/u][/b][/color][b]Getting Started[/b][b]Contents[/b][list][*]1. Requirements[*]2. Application Structure[*]3. Deployment[*]4. Further Rea...
复制链接

扫一扫