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

roc08

浏览: 227471 次
性别:
来自: 北京

最近访客更多访客>>

libian339

shawbis8712

elysiumzing

xzz212

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

extjs4

extjs4 部署 sencha sdk build jsb3

本文所有翻译均出于参考文献中所列，请支持原创作者，谢谢原创作者们
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

分享到：

OSGi学习笔记 | Tomcat开启GZip

2013-02-05 15:19
浏览 1873
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Extjs4 checkbox的值on与true的问题

基于extjs4的多级下拉框联动组件

extjs4 编辑器

Firefox 18 javascript编译器 IonMonkey 引起的extjs 布局混乱问题

Extjs4 Web Application Development Cookbook学习笔记四

Extjs4 Web Application Development Cookbook学习笔记三

Extjs4 Web Application Development Cookbook学习笔记二

最近访客更多访客>>