文档章节

[翻译]Ext JS 教程-开始使用 ExtJS 4

LeoXu
 LeoXu
发布于 2013/05/30 19:48
字数 2337
阅读 1534
收藏 33

入门

1. 需求

1.1 网页浏览器

ExtJS 4 支持所有主流的浏览器,从IE 6 到最新的谷歌Chrome。在开发期间,我们建议你使用下面这些浏览器,以获得更好的调试体验。

Ø Google Chrome 10+

Ø Apple Safari 5+

Ø Mozilla Firefox 4+ 带Firebug Web 开发插件

本教程假设你正在使用最新的谷歌 Chrome 浏览器。如果你还没有 Chrome,花点时间去下载它吧,然后去熟悉熟悉 Chrome 的开发者工具。

1.2 Web 服务器

尽管使用 ExtJS 4 并不一定需要一个本地的web 服务器,仍然强烈建议你在开发的时候能有一个,因为 XHR 在大多数浏览器上有针对本地 file:// 的cross origin 限制。如果你还没有本地的web 服务器,建议你下载并安装 Apache HTTP Server。

Ø 了解在 Windows 上面安装 Apache

Ø 了解在 Linux 上面安装 Apache

Ø Mac OS X 已经内置了apache,你可以在 System Preference > Sharing 下面的 Web Sharing 旁找到

一旦你安装好了 Apache ,你可以通过在浏览器地址栏输入 localhost 验证它是否在运行。你会看到一个表示 Apache HTTP 服务器已经成功安装并且正常运行的开始页面。

1.3 Ext JS 4 SDK

下载 Ext JS 4 SDK,把压缩包解压到一个在你的web 根路径下新建的extjs文件夹。如果你不知道web根目录在哪儿,查阅你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 。如果一个 ExtJS 4 的欢迎页面出现了,代表你已经一切就绪了。

2. 应用程序结构

2.1 基本结构

如下所列的建议尽管不是强制的,但是可以作为最佳实践指南考虑,以保持你的应用的结构条理性、可扩展性和可维护性。下面是推荐的Ext JS 应用程序结构:

- appname

- app

    - namespace

        - Class1.js

        - Class2.js

        - ...

- extjs

- resources

    - css

    - images

    - ...

- app.js

- index.html

Ø Appname 是一个包含应用程序所有源文件的文件夹

Ø App 包含所有的类, 类的命名形式应该遵循类系统指南中列出的规则

Ø Extjs 包含 ExtJS 4 SDK 的文件

Ø Resources 包含为应用程序提供外观的 CSS 和图片文件,还有其他的静态文件(XML、JSON等等)

Ø Index.html 是 HTML 文档的入口点

Ø App.js 包含你所有的业务逻辑

现在不要为了创建所有上述的文件夹而担忧。当前让我们关注用最少量需求的代码去获得并运行一个 Ext JS 应用程序。 我们将会创建一个 “hello world” Ext JS 应用程序,称作 “Hello Ext”。首先,在你的web根路径下面创建下面这些文件和文件夹。

- helloext

- app.js

- index.html

然后解压 Ext JS 4 SDK 里的 exjst 到 helloext 目录中。

一个典型的ExtJS应用程序包含一个 HTML文档——index.html。 打开 index.html,插入下面的 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/ext-debug.js 包含 ExtJS 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”的标题条,面板的body 区域还有“welcome”信息显示。

2.2 动态加载

打开 Chrome 开发者工具,点击 Console 选项。现在刷新 Hello Ext 应用程序。你应该会看到控制台(console) 显示像下面这样一条警告信息:

clip_image002

ExtJS 4 带有一个在你的应用需要时动态加载 JavaScript 资源的系统。在我们的例子中, Ext.create 创建了一个 Ext.container.Viewport 实体。当 Ext.create 被调用的时候,加载器首先会检查 Ext.container.Viewport 是否已经被定义了。如果已经定义了,加载器会在初始化viewport 对象前尝试加载加载包含了定义 Ext.container.Viewport 的代码。 在我们的例子中 Viewport.js 文件获取加载成功了,但是加载器发现文件正在以一种 less-than optimal 方式被加载。 于是我们现在在一个 Ext.container.Viewport 的实体被需要时加载了 Viewport.js 文件, 代码的执行一直到文件已经被加载成功的时候才停止,造成一小段延时。 当我们对 多次调用 Ext.create时,延时的影响会累积,因为应用程序在请求下一个文件时,都会等待每一个文件加载完。

为了解决这个问题,我们可以调用 Ext.application 的一行代码。

Ext.application:

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

这样做将确保在应用程序运行之前包含定义 Ext.container.Viewport 的代码已经被加载进来了。 在你刷新页面时,你应该不会再看到 Ext.Loader 的警告信息了。

2.3 库文件包含方法

当你解压了你下载的 ExtJS 4 文件时,你将看到下面的这些文件:

1. ext-debug.js ——这个文件仅在开发期间使用。 它提供了启动和运行所需最小量的 ExtJS 核心类。任何附加的类应该向上面演示的那样作为单独的文件被动态加载。

2. ext.js ——跟ext-debug.js 是一样的,不过做了迷你化处理。它很重要,用来同你应用程序的 app-all.js 文件结合。(见 第3节)

3. ext-all-debug.js ——这个文件包含了真个 ExtJS 库。这对于缩短你的学习曲线很有帮助,然而实际的应用开发中 ext-debug.js 大多情况下是首选。

4. ext-all.js 这是一个迷你化了 ext-all.debug.js 可以用于生产环境,当大部分应用程序不需

要使用它包含的所有类时,不推荐用这个。取而代之的做法是为你的生产环境创建一个定制的构建,这在第3节描述到了。

3. 部署

新推出的 Sencha SDK 工具让任何 ExtJS 4 应用程序的部署比以前更容易了。这个工具允许你生成一份JSB 3(JSBuilder 文件格式)形式的JavaScript 依赖清单文件, 并且创建一个定制的构建包,里面只包含你的应用程序所需要的代码。

一旦你把SDK 工具安装好了,打开控制台窗口并切换到你应用程序所在的目录。

cd path/to/web/root/helloext

到此你仅仅需要运行一对简单的命令。第一行生成一个JSB3文件:

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

对于基于一种动态服务器端语言——像 PHP、Ruby、ASP等等——构建的应用程序,你可以简单的用你应用程序的真实URL替换 index.html:

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

这条命令会浏览你的index.html文件,寻在所有被应用实用到的框架和应用文件,然后创建一个叫做 app.jsb3的 JSB 文件。JSB3的生成给我们在构建之前变更 app.jsp3 的机会——这在当你需要复制定制的资源是可能有帮助,但在大多数情况下我们可以使用第二条命令执行构建:

sencha build -p app.jsb3 -d .

这条命令基于 JSB3 文件 创建了两个文件:

1. All-classes.js ——这个文件包含了你应用程序的所有类。它不是迷你化的,因而对你查找问题很有帮助。在我们的例子中这个文件内容是空的,因为我们的“Hello Ext”应用不包含任何类。

2. App-all.js ——这个文件是迷你化的,包含了应用程序的和所有运行时需要的ExtJS的类。它是生产环境用的 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 ,你应该会看到产品环境版本的“Hello Ext”应用程序。

4. 阅读更多

1. 类系统

2. MVC 应用程序架构

3. 布局和容器

4. 使用数据

© 著作权归作者所有

LeoXu

LeoXu

粉丝 119
博文 88
码字总数 86250
作品 0
长沙
程序员
私信 提问
加载中

评论(3)

大侠柳云枫
大侠柳云枫
给个建议,像这种系列片,最好加上一二三四的顺序值。。。
LeoXu
LeoXu 博主

引用来自“苏翰”的评论

表示木有用过

我也木有用过,纯翻译,嘿嘿
苏生不惑
苏生不惑
表示木有用过
ExtJS Getting Started

公司的IM用的ExtJS,我自己写的用的jQuery,所以又得学习了,当然,相似之处肯定是有的,比如Ext.onReady()和$(document).ready()感觉就是差不多的东西,还有都得熟悉一下选择器...还是先入门...

豆仔
2012/11/09
232
1
为Zend Studio (Eclipse)安装Spket插件,以支持ExtJS 4.0代码自动提示

之前在Zend Studio 7.0中安装过ExtJS2.0的自动提示,现在的软件升级太快,ExtJS4.0都出来了,无奈选择升级,不升还好,这一升搞了我半天的时间,怎么弄都 没提示了,干啥都得花点时间就好比这...

BabyMason
2015/02/06
18
0
extjs2.0/3.4 入门教程以及一些例子

前言 有本资料叫extjs简易实用教程,讲得很棒,是初学者的福音——比起官方普遍较复杂的examples,这个教程更靠谱。而且虽说是2.x的教程,但同样适用于3.x——4.x就不知道了。 只是,有些问题...

itwriter
2014/02/25
4.6K
5
eclipse+spket+Extjs4.2.1开发环境搭建

一、开发工具配置 1、http://www.eclipse.org/downloads/下载Eclipse,解压。 2、http://spket.com/download.html下载Plugin,解压后覆盖到Eclipse的目录。 3、启动Eclipse,选择window→pro...

南風
2014/08/20
254
0
Dreamweaver、Myeclipse 中安装EXT IDE插件Spket

Dreamweaver 中安装EXT IDE插件Spket 前几天写了在Myeclipse6.5下安装Spket插件, 安装以后发现个不好的,就是字体太小,设置都不起作用(可能我技术不到家.嘿嘿),郁闷到家了. 安装好以后也一直没...

柒月-小妖精
2013/05/02
567
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 年迈渔夫遭黑帮袭抢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享Elvis Presley的单曲《White Christmas》: 《White Christmas》- Elvis Presley 手机党少年们想听歌,请使劲...

小小编辑
40分钟前
99
8
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部