Extjs教程_第一章_起步

Close和Ok按钮在鼠标移近时高亮显示——一切只不过是一句话的事情。Ext为您搞定

了一切，我们来看看如何能做的更多。

N：你可能已经发现我们的文档的body中没有任何元素。Ext实现其功能不需

要事先存在的标记，它只是按照需要来产生一切内容。

这个示例：

我们来研究下代码。Ext组件需要以“Ext”开头并且经常要包含onReady函数，

这个我们将在下章做详细介绍。

y(function(){

});

Ext包含很多易懂的接口，大部分只是一句话，当准备好Ext后，它可以展示一

个警告窗口，让Hello作为标题，让World作为主体。

我们的消息窗口源自于，它是所有消息窗体的前缀，是“MessageBox”

的简称。alert部分告诉我们消息窗口的类型。

('Hello', 'World');

不工作了？

当库未准备好时，我们会接收到一个'Ext' is undefined的错误。

这个消息代表Ext并没有被加载。可能是一个或者多个文件的引用路径不对，

复核一下路径让他们指定到已存在的文件。如果一切都正常的话，你应该可以看到

adapter文件夹和以及ext-all-bug在lib/extjs文件夹下。

另外一个常见的问题是，CSS文件的丢失或者不正常的引用。这样的话，显示会不

正常，如下：

如果发生这样的状况，请检查你是否从SDK中获得了CSS文件，以及路径是否

正确。resources文件夹需要在lib/extjs文件夹下。

适配器（Adapters）：

Ext开发之初，需要YUI库来做“幕后”的工作。随后，Ext采用了2个新的框

架——jQuery和scriptaculous（Protaculous）。

这意味着当你已经采用了其他的库或者其他的库可以刚好地满足你的需求是，

我们可以使用适配器来连接这一切。Ext还可以保证它的功能，组件还如之前一样，不

论你选择何种适配器。

Ext也有它自己的适配器，如果你对其他的库或者框架没有偏爱的话，就用Ext

的内建适配器吧。

使用适配器：

为了使用适配器，你需要先引入扩展的库，再加入Ext SDK中相关的适配器文

件。我们的示例用的是Ext适配器。如果使用其他库，只要把Ext默认的适配器引入脚

本行置换为新的库，如下所示：

对于jQuery，引入如下文件：

对于YUI，把如下文件加入head：

对于“Prototype + Scriptaculous”：

在引入适配器和基本库之后，我们只需在引入或者文

件。

我是异步的！

web1.0代码的运行点是建立在完成的基础上的——一直等到每一行代码都执行

完全后再进行下一个任务。如同建造一个房子一样，必须在砌墙前打地基，之后才能

盖房顶。

在Ext中我们可以先盖房顶后打地基。想象一下，房顶正在工厂中制造，而地

基此时正在夯实，接下来是筑墙。当一切就绪后，房顶会立刻安置在墙的上方。

这里的介绍我们事先可能没有接触过，也没必要弄得很清楚，像房顶在墙筑好

前建造完。我们不需要再一行一行地进行web开发了。

Ext给我们提供了事件和句柄来实现功能。我们可以设计事件来监视墙何时能

建好，这样我们就可以第一时间安上房顶。这种思想可能让很多web开发者难以接收，

但是您一定会很快掌握的。

N：传统的JS警告框会阻止代码的执行，将带来不可预期的结果。你不可以采

用传统的警告框，这样可以让显示MessageBox的同时不产生暂停。

地方化：

Ext可以在按照您的语言来查看，现在有40种翻译（遗憾的是，克林贡文不在

其内）。所有的翻译来自用户的贡献——我们需要在自己的母语中使用Ext。所以我们

可以选择自己语言的版本，并把它拷贝到lib文件夹下。通过复制语言文件到lib文件

夹，我们可以编辑它并添加翻译到其中，但要保证在升级时不要覆盖了它。

有三种地方化的方案，对应三种不同的方法：

 只有英语

 非英语的单一语种

 多语言

只有英语：

这种方案不需要做任何改动，也不需要添加任何文件，因为英语的翻译已经存在于

文件当中了。

一种非英语语言：

第二种方案需要从build/locale文件夹中引入一个语言文件。是通过重写英语文

本来实现此方案的，所以，它需要在其他所有的库文件引入后才能引入，如下所示：

在此例中我已经加入了西班牙语的翻译，我们来看看效果：

部分UI界面被本地化了——大概包括日历文本、错误信息、tooltip信息，分页

信息以及加载指示。在你的程序中指定的信息，如Hi标题以及Hello World Example文

本则可以对其进行翻译并加到文件中（“XX”是你语言的缩写）或者添

加到一个你自定义的语言文件中。推荐的方式是建立一个你自己的语言文件来用来记

录改动和增加的内容。这样可以使方便我们准备升级以及修复主要的语言文件。

多语言：

第三种方案是对第二种方案的一点点改动。我们只需要添加一些服务端脚本来

使得页面可以在语言之间切换。遗憾的是，语言间的切换并不是完全动态的，换句话

说，我们不可能第一时间感受到改动在屏幕上的显示效果。

Ext在线社区：

Ext在线社区云集了一大批高手，Ext开发者也会经常性在论坛上回复大家的问

题：

/forum/

如果你遇到了困难，可以在论坛上搜索你需要的回答。我建议你使用在Learn

板块中Google论坛搜索工具，该板块位于：

/learn/

H：在论坛提问之前，您最好附上详细的错误信息，以及错误代码和消息。这

是 您获得良好反馈的关键所在。

总结：

在这章里，我们们介绍了如何正常运行Ext的基础知识以及简单的脚本。我们经

常会因为落下了一些细节从而导致在某些错误上浪费宝贵的时间。但是现在你应该准

备好了去克服将要出现的错误。

本章的示例让我们看到了Ext的核心所在：提供用户界面。我们只使用了一个对

话框，但是，如你所见，展现Ext组件只需要简单的几行代码。这章的主要目的在于让

您知道如何获得并安装Ext使其工作。所以，我们可以开始亲手做一些真正精彩的控件。

本文标签： 文件需要引入语言