`
roc08
  • 浏览: 224229 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

extjs4部署sencha sdkbuildjsb3 
阅读更多
本文所有翻译均出于参考文献中所列，请支持原创作者，谢谢原创作者们
Getting Started
Contents
  • 1. Requirements
  • 2. Application Structure
  • 3. Deployment
  • 4. Further Reading

1. 要求
1.1 浏览器
Ext JS 4 支持大多主流的浏览器（Ie6~chrome）,在开发时，建议选择以下几种浏览器(with debuger)
  • Google Chrome 10+
  • Apple Safari 5+
  • Mozilla Firefox 4+ with the Firebug Web Development Plugin

此教程基于Chrome最新版。如果你还没有安装Chrome,您需要花点时间安装下，再稍微熟悉Chrome的开发工具。

1.2 Web 服务器
虽然使用Extjs4不是必须要安装一个本地web服务器的，但因为大多数浏览器对XHR访问本地的file协议做了限制，最好还是安装一个，这里推荐安装Apache HTTP Server.
  • 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".

验证安装是否可用，在浏览器中打开localhost. 会看到一个启动页面，说明server已经开装成功.

1.3. Ext JS 4 SDK
下载 Ext JS 4 SDK.且解压到web根目录下名为extjs的目录. 如果你不确定web根目录在哪, 查看服务器手册. 你的web服务器根目录依赖你的操作系统,如果你使用的是Apache服务器，则目录位置如下:
  • Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"
  • Linux - "/var/www/"
  • Mac OS X - "/Library/WebServer/Documents/"

如果你安装成功，在浏览器中打开http://localhost/extjs/index.html .如果你看到Extjs4的欢迎界面，说明你已经安装成功.

2. 应用的结构
2.1 基本结构
虽然不是强制性的，下面所列建议，应视为最佳做法，更好的组织您的应用程序，保证更好的扩展性和可维护性。下面是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>

  • extjs/resources/css/ext-all.css -----保含extjs框架所的有样式
  • extjs/ext-debug.js  ----extjs最小的可调式代码库
  • app.js   ---应用程序的代码

下面开始写应用程序的代码，打开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.

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

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

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


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

但是现在，我们在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"应用程序的产品版本了。

4. Further Reading
  • Class System
  • MVC Application Architecture
  • Layouts and Containsers
  • Working with Data


5. 参考资料（翻译出处）
http://www.cnblogs.com/longyg/archive/2012/11/20/2777849.html
http://blog.csdn.net/guoqingcun/article/details/7182193
分享到：
| Tomcat开启GZip
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics