Extjs教程第一章起步.docx

1、Extjs教程第一章起步第一章 起步在这章里，我们将介绍ExtJS的基本功能。如果你对web开发熟悉的话，您会惊诧于ExtJS框架的优雅！不同其他的JavaScript库，ExtJS为您的开发夯实了基础，只需几行代码，你就可以制作出丰富的用户界面。本章包括：1. ExtJS的功能和您将会喜爱上它的原因；2. 如何获得Ext并在web应用中采用它；3. 采用”适配器(adapters)“使得Ext和其他的JavaScript库共存；4. 充分利用AJAX技术；5. 在您的语言中展示ExtJS对象；关于Ext：我们采用最新的的Ext 2.x版本，1.x版本到2.x版本的是一个重组的过程，包括添加新

2、的组件、重命名组件用来重新组织结构等等。这使得1.x和2.x兼容性很低。3.x版 本则不然，他对2.x有很强的兼容性，可以很好的联合本书中所设计的内容。Ext的开发组决定在日后的版本发布中都做到向前兼容。Ext库是对雅虎YUI的一个拓展，提供了它所不支持的特性：良好的API，真实的控件。虽然YUI致力于用户界面，但是它却没有提供许多有用的功能。Ext的产生源自于开发者、开源贡献者们将YUI扩展成一个强大的客户端应用程序库的努力。Ext提供了一个简单丰富的用户界面，如同桌面程序一般。这使得开发者能够把精力更多的转移到实现应用的功能上。Ext官网上的示例会让你知道它是如何的不可思议：其中最引人注目

3、的一个例子就是Feed Viewer，它展示了Ext.However提供的多种特性，对于学习来说它可能太复杂了，所以现在只需你感受它带给你的精彩。另外一个精彩的例子就是Simple Task任务跟踪程序，它加载了Google Gears的数据库。Ext: 不仅仅是另一个JS库：Ext不仅仅是另一个JS库，实际上它可以通过适配器（adapter）和其它JS库一起工作。我们将在本章的稍后来介绍适配器。通常来说，我们使用Ext的目的是满足高层次的用户交互要比我们传统概念上的站点交互性更强。一个采用了工作流和任务管理的网站就是一个很好的示例，否则Ext只能带给您的上司惊奇的喘息。Ext让通过如下的方式

4、来让web应用的开发变的十分简单： 提供简单的，跨浏览器的控件，如：窗口、表格、表单。这些组件都是能够适应市场上的主流浏览器的。我们不需要做任何改动。 用户是通过EventManager来和浏览器做交互的，相应的事件有：用户的键盘输入，鼠标击打，浏览器监听（窗口改变大小，改变字体）等等； 在和用户交互时不需要刷新页面，一切在后台进行。它允许你从服务器通过AJAX来获取或者提交数据并且在第一时间执行你的反馈。跨浏览器DOM：我确定不需要在解释浏览器兼容带来的问题了。一个有着自定义样式的在不同的浏览器的显示是不同的。但当我们使用Ext的控件时，Ext库会很好地控制这种浏览器的兼容性，所以在不同浏览

5、器中控件的显示是几乎相同的。这些浏览器包括：Internet Explorer 6+Firefox 1.5+ (PC, Mac)Safari 2+Opera 9+ (PC, Mac)事件驱动接口：事件是用来描述某种动作的发生。一个事件可以是用户的动作，例如单击某个元素或者对AJAX请求的相应。当用户对一个按钮进行操作的时候，会产生很多而不是一个事件，包括：鼠标指向按钮，点击按钮和离开按钮。我们可以添加监听器（listener）来监听这些事件，并调用相应代码采取相应。对事件的监听并不完全依靠用户界面，系统事件随时随刻发生，当你发起AJAX请求，和AJAX状态相关的事件也就产生了，它们是：开始，完

6、成和失败等等。Ext和AJAX:AJAX用来描述同服务器的异步交互，你可以在同服务器交互的同时来进行其他的任务。一个用户可以在加载一个表格数据的同时填写自己的表单它们并行不悖，不用等待页面的刷新。获得Ext：所有你所需的东西都可以从Ext官网上获得： SDK， 它最重要的功能是带给你使Ext正确运行的资源。如何安置Ext：当你获得SDK文件，把它解压到你的硬盘上，最好放在你自己的文件夹中。我访问文件的方式是按照linux规则来的，为了很好地运行本书示例，我把所有文件解压到命名为lib的文件夹中。当一切处理好后，你的目录结构应该如下所示：为了使Ext容易升级到最新版本，我把解压后的文件夹ext-

7、2.0.1重新命名为extjs。SDK里有一个包含所以Ext的JS代码的文件，名字为ext-all。它还有一个可供调试代码的副本，由于进行了代码的格式化和反混淆等操作，该文件可以您准确定位到错误的行数和具体位置。开发时您可以使用ext-all-debug，发布时转换为ext-all，一切就是这么的简单以及过度自然。在SDK中包含着依赖说明、文档、示例等内容。adapter和resources是Ext工作所必须的，其他资源则是为开发准备的。 adapter：包含能够使其他库和Ext共用的文件； build：可以自定义ext-all.js的文件； docs：文档中心（必须在服务器上查看）； exa

8、mples：大量精彩深刻的示例； resources：Ext运行的各种资源（如CSS和图片等）； source：Ext完全而详细的源代码。在创建站点主目录后，您需要上传adapter和resources文件夹。在页面中引入：在我们使用Ext之前，需要引入Ext库文件。在HEAD标签加入SDK中提供的几个文件，如下所示： Getting Started Example 到Ext的路径一定要保证正确，和你的HTML文件的相对路径关系一定要调整好。这些文件需要按照如下的顺序引入： ext-all.css：Ext依赖的全部CSS； 其他的js库（参阅本章”适配器“一节）； ext-base.js：Ex

9、t的”adapter“我们将在后面学习； ext-all.js或者ext-all-debug.js：主要的Ext库文件； 主题文件（CSS）在此引入，或者在引入玩Ext的CSS文件后任何位置引入。这些文件是用来干什么的：我们需要添加一下三个文件： ext-all.css：这是一个样式表文件，用来控制组件的显示。改文件不需要进行修改，任何改动将影响日后的升级。如果真的想改动样式的话，可以在引入该样式文件后再做覆盖。 ext-base.js：这个文件提供了Ext的核心功能。如果Ext是一部车，它就是车的引擎。这个文件我们可以修改以用来采用其他的库，如jQuery，让它和Ext共存。 ext-all

10、-bug.js/ext-all.js：所有的组件都蕴含在这个文件里面。前者用来调试开发，后者在发布的时候采用。当这些文件都准备好后，我们就可以真正开始享受Ext带给我们的快乐。N：如果你在同时使用后台语言（如PHP、ASP.NET等），你可以选择动态的加载这些行。对于本书中的大部分示例来讲，我们假定其运行在静态HTML页面中。使用Ext库：现在我们在页面中加入了Ext库，我们可以在页面中添加Ext代码了。在第一个例子中，我们使用Ext来显示消息对话框。可能满足不了您的胃口，但是这只是个开始。动作的时间：我们可以通过在文件的头部添加script段来加入Ext代码，当然得添加到Ext文件引入之后。

11、我们的例子会弹出一个Ext风格的警告对话框： Getting Started Example Ext.onReady(function() Ext.Msg.alert(Hello, World); ); 我们现在先不详细解释脚本。首先，我们要确定Ext库被成功的引用。当我们打开页面，我们应该能看到这样的警告消息：如同一个真的对话框一样，你可以任意拖拽它，但只局限有浏览器中，因为它并不是一个真正的对话框，只是如同罢了。它是有很多堆砌而成，你可以看到Close和Ok按钮在鼠标移近时高亮显示一切只不过是一句话的事情。Ext为您搞定了一切，我们来看看如何能做的更多。N：你可能已经发现我们的文档的bod

12、y中没有任何元素。Ext实现其功能不需要事先存在的标记，它只是按照需要来产生一切内容。这个示例：我们来研究下代码。Ext组件需要以“Ext”开头并且经常要包含onReady函数，这个我们将在下章做详细介绍。 Ext.onReady(function() Ext.Msg.alert(Hello, World););Ext包含很多易懂的接口，大部分只是一句话，当准备好Ext后，它可以展示一个警告窗口，让Hello作为标题，让World作为主体。我们的消息窗口源自于Ext.Msg，它是所有消息窗体的前缀，是“MessageBox”的简称。alert部分告诉我们消息窗口的类型。 不工作了？当库未准备好

13、时，我们会接收到一个Ext is undefined的错误。这个消息代表Ext并没有被加载。可能是一个或者多个文件的引用路径不对，复核一下路径让他们指定到已存在的文件。如果一切都正常的话，你应该可以看到adapter文件夹和ext-all.js以及ext-all-bug在lib/extjs文件夹下。另外一个常见的问题是，CSS文件的丢失或者不正常的引用。这样的话，显示会不正常，如下：如果发生这样的状况，请检查你是否从SDK中获得了CSS文件，以及路径是否正确。resources文件夹需要在lib/extjs文件夹下。适配器（Adapters）：Ext开发之初，需要YUI库来做“幕后”的工作。随

14、后，Ext采用了2个新的框架jQuery和scriptaculous（Protaculous）。这意味着当你已经采用了其他的库或者其他的库可以刚好地满足你的需求是，我们可以使用适配器来连接这一切。Ext还可以保证它的功能，组件还如之前一样，不论你选择何种适配器。Ext也有它自己的适配器，如果你对其他的库或者框架没有偏爱的话，就用Ext的内建适配器吧。使用适配器：为了使用适配器，你需要先引入扩展的库，再加入Ext SDK中相关的适配器文件。我们的示例用的是Ext适配器。如果使用其他库，只要把Ext默认的适配器引入脚本行置换为新的库，如下所示：对于jQuery，引入如下文件：对于YUI，把如下文件

15、加入head：对于“Prototype + Scriptaculous”：在引入适配器和基本库之后，我们只需在引入ext-all.js或者ext-all.debug.js文件。我是异步的！web1.0代码的运行点是建立在完成的基础上的一直等到每一行代码都执行完全后再进行下一个任务。如同建造一个房子一样，必须在砌墙前打地基，之后才能盖房顶。在Ext中我们可以先盖房顶后打地基。想象一下，房顶正在工厂中制造，而地基此时正在夯实，接下来是筑墙。当一切就绪后，房顶会立刻安置在墙的上方。 这里的介绍我们事先可能没有接触过，也没必要弄得很清楚，像房顶在墙筑好前建造完。我们不需要再一行一行地进行web开发了。

16、 Ext给我们提供了事件和句柄来实现功能。我们可以设计事件来监视墙何时能建好，这样我们就可以第一时间安上房顶。这种思想可能让很多web开发者难以接收，但是您一定会很快掌握的。 N：传统的JS警告框会阻止代码的执行，将带来不可预期的结果。你不可以采用传统的警告框，这样可以让显示MessageBox的同时不产生暂停。 地方化： Ext可以在按照您的语言来查看，现在有40种翻译（遗憾的是，克林贡文不在其内）。所有的翻译来自用户的贡献我们需要在自己的母语中使用Ext。所以我们可以选择自己语言的版本，并把它拷贝到lib文件夹下。通过复制语言文件到lib文件夹，我们可以编辑它并添加翻译到其中，但要保证在升

17、级时不要覆盖了它。 有三种地方化的方案，对应三种不同的方法： 只有英语 非英语的单一语种 多语言只有英语：这种方案不需要做任何改动，也不需要添加任何文件，因为英语的翻译已经存在于ext-all.js文件当中了。一种非英语语言： 第二种方案需要从build/locale文件夹中引入一个语言文件。是通过重写英语文本来实现此方案的，所以，它需要在其他所有的库文件引入后才能引入，如下所示： 在此例中我已经加入了西班牙语的翻译，我们来看看效果：部分UI界面被本地化了大概包括日历文本、错误信息、tooltip信息，分页信息以及加载指示。在你的程序中指定的信息，如Hi标题以及Hello World Exam

18、ple文本则可以对其进行翻译并加到ext-lang-XX.js文件中（“XX”是你语言的缩写）或者添加到一个你自定义的语言文件中。推荐的方式是建立一个你自己的语言文件来用来记录改动和增加的内容。这样可以使方便我们准备升级以及修复主要的语言文件。多语言： 第三种方案是对第二种方案的一点点改动。我们只需要添加一些服务端脚本来使得页面可以在语言之间切换。遗憾的是，语言间的切换并不是完全动态的，换句话说，我们不可能第一时间感受到改动在屏幕上的显示效果。Ext在线社区：Ext在线社区云集了一大批高手，Ext开发者也会经常性在论坛上回复大家的问题：如果你遇到了困难，可以在论坛上搜索你需要的回答。我建议你使用在Learn板块中Google论坛搜索工具，该板块位于：H：在论坛提问之前，您最好附上详细的错误信息，以及错误代码和消息。这是 您获得良好反馈的关键所在。总结：在这章里，我们们介绍了如何正常运行Ext的基础知识以及简单的脚本。我们经常会因为落下了一些细节从而导致在某些错误上浪费宝贵的时间。但是现在你应该准备好了去克服将要出现的错误。本章的示例让我们看到了Ext的核心所在：提供用户界面。我们只使用了一个对话框，但是，如你所见，展现Ext组件只需要简单的几行代码。这章的主要目的在于让您知道如何获得并安装Ext使其工作。所以，我们可以开始亲手做一些真正精彩的控件。