Ext.js教程完整版.pdf-资料库

m0_37585915-10508242-4744300845378652102.pdf-第1页.png

第1页 / 共152页

m0_37585915-10508242-4744300845378652102.pdf-第2页.png

第2页 / 共152页

m0_37585915-10508242-4744300845378652102.pdf-第3页.png

第3页 / 共152页

m0_37585915-10508242-4744300845378652102.pdf-第4页.png

第4页 / 共152页

m0_37585915-10508242-4744300845378652102.pdf-第5页.png

第5页 / 共152页

m0_37585915-10508242-4744300845378652102.pdf-第6页.png

第6页 / 共152页

m0_37585915-10508242-4744300845378652102.pdf-第7页.png

第7页 / 共152页

m0_37585915-10508242-4744300845378652102.pdf-第8页.png

第8页 / 共152页

第一章起步（1）在这章里，我们将介绍 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 版本的是一个重组的过程，包括添加新的组件、重命名组件用来重新组织结构等等。这使得 1.x 和 2.x 兼容性很低。3.x 版本则不然，他对 2.x 有很强的兼容性，可以很好的联合本书中所设计的内容。Ext 的开发组决定在日后的版本发布中都做到向前兼容。 Ext 库是对雅虎 YUI 的一个拓展，提供了它所不支持的特性：良好的 API，真实的控件。虽然 YUI 致力于用户界面，但是它却没有提供许多有用的功能。 Ext 的产生源自于开发者、开源贡献者们将 YUI 扩展成一个强大的客户端应用程序库的努力。 Ext 提供了一个简单丰富的用户界面，如同桌面程序一般。这使得开发者能够把精力更多的转移到实现应用的功能上。Ext 官网上的示例会让你知道它是如何的不可思议：http://www.extjs.com/deploy/dev/examples/。其中最引人注目的一个例子就是 Feed Viewer，它展示了 Ext.However 提供的多种特性，对于学习来说它可能太复杂了，所以现在只需你感受它带给你的精彩。

另外一个精彩的例子就是 Simple Task 任务跟踪程序，它加载了 Google Gears 的数据库。 Ext: 不仅仅是另一个 JS 库： Ext 不仅仅是另一个 JS 库，实际上它可以通过适配器（adapter）和其它 JS 库一起工作。我们将在本章的稍后来介绍适配器。

通常来说，我们使用 Ext 的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。一个采用了工作流和任务管理的网站就是一个很好的示例，否则 Ext 只能带给您的上司惊奇的喘息。 Ext 让通过如下的方式来让 web 应用的开发变的十分简单： • 提供简单的，跨浏览器的控件，如：窗口、表格、表单。这些组件都是能够适应市场上的主流浏览器的。我们不需要做任何改动。 • 用户是通过 EventManager 来和浏览器做交互的，相应的事件有：用户的键盘输入，鼠标击打，浏览器监听（窗口改变大小，改变字体）等等； • 在和用户交互时不需要刷新页面，一切在后台进行。它允许你从服务器通过 AJAX 来获取或者提交数据并且在第一时间执行你的反馈。跨浏览器 DOM：我确定不需要在解释浏览器兼容带来的问题了。一个有着自定义样式的

在不同的浏览器的显示是不同的。但当我们使用 Ext 的控件时，Ext 库会很好地控制这种浏览器的兼容性，所以在不同浏览器中控件的显示是几乎相同的。这些浏览器包括： Internet Explorer 6+ Firefox 1.5+ (PC, Mac) Safari 2+ Opera 9+ (PC, Mac) 事件驱动接口：事件是用来描述某种动作的发生。一个事件可以是用户的动作，例如单击某个元素或者对 AJAX 请求的相应。当用户对一个按钮进行操作的时候，会产生很多而不是一个事件，包括：鼠标指向按钮，点击按钮和离开按钮。我们可以添加监听器（listener）来监听这些事件，并调用相应代码采取相应。对事件的监听并不完全依靠用户界面，系统事件随时随刻发生，当你发起 AJAX 请求，和 AJAX 状态相关的事件也就产生了，它们是：开始，完成和失败等等。 Ext 和 AJAX: AJAX 用来描述同服务器的异步交互，你可以在同服务器交互的同时来进行其他的任务。一个用户可以在加载一个表格数据的同时填写自己的表单——它们并行不悖，不用等待页面的刷新。

获得 Ext：所有你所需的东西都可以从Ext官网上获得：http://www.extjs.com/download。下载包含大量示例和API的Ext SDK，它最重要的功能是带给你使Ext正确运行的资源。如何安置 Ext：当你获得 SDK 文件，把它解压到你的硬盘上，最好放在你自己的文件夹中。我访问文件的方式是按照 linux 规则来的，为了很好地运行本书示例，我把所有文件解压到命名为 lib 的文件夹中。当一切处理好后，你的目录结构应该如下所示：为了使 Ext 容易升级到最新版本，我把解压后的文件夹 ext‐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：文档中心（必须在服务器上查看）； • examples：大量精彩深刻的示例； • • 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：Ext 的”adapter“——我们将在后面学习； • ext‐all.js 或者 ext‐all‐debug.js：主要的 Ext 库文件； • 主题文件（CSS）在此引入，或者在引入玩 Ext 的 CSS 文件后任何位置引入。

第一章起步（2）这些文件是用来干什么的：我们需要添加一下三个文件： • ext‐all.css：这是一个样式表文件，用来控制组件的显示。改文件不需要进行修改，任何改动将影响日后的升级。如果真的想改动样式的话，可以在引入该样式文件后再做覆盖。 • ext‐base.js：这个文件提供了 Ext 的核心功能。如果 Ext 是一部车，它就是车的引擎。这个文件我们可以修改以用来采用其他的库，如 jQuery，让它和 Ext 共存。 • ext‐all‐bug.js/ext‐all.js：所有的组件都蕴含在这个文件里面。前者用来调试开发，后者在发布的时候采用。当这些文件都准备好后，我们就可以真正开始享受 Ext 带给我们的快乐。 N：如果你在同时使用后台语言（如 PHP、ASP.NET 等），你可以选择动态的加载这些行。对于本书中的大部分示例来讲，我们假定其运行在静态 HTML 页面中。使用 Ext 库：现在我们在页面中加入了 Ext 库，我们可以在页面中添加 Ext 代码了。在第一个例子中，我们使用 Ext 来显示消息对话框。可能满足不了您的胃口，但是这只是个开始。动作的时间：我们可以通过在文件的头部添加 script 段来加入 Ext 代码，当然得添加到 Ext 文件引入之后。我们的例子会弹出一个 Ext 风格的警告对话框： Getting Started Example src="lib/extjs/ext‐all‐debug.js"> 我们现在先不详细解释脚本。首先，我们要确定 Ext 库被成功的引用。当我们打开页面，我们应该能看到这样的警告消息：如同一个真的对话框一样，你可以任意拖拽它，但只局限有浏览器中，因为它并不是一个真正的对话框，只是如同罢了。它是有很多

堆砌而成，你可以看到 Close 和 Ok 按钮在鼠标移近时高亮显示——一切只不过是一句话的事情。Ext 为您搞定了一切，我们来看看如何能做的更多。 N：你可能已经发现我们的文档的 body 中没有任何元素。Ext 实现其功能不需要事先存在的标记，它只是按照需要来产生一切内容。这个示例：我们来研究下代码。Ext 组件需要以“Ext”开头并且经常要包含 onReady 函数，这个我们将在下章做详细介绍。 Ext.onReady(function(){ Ext.Msg.alert('Hello', 'World'); });

资料库

Ext.js教程完整版.pdf

相关推荐

开发技术

热门标签

最新资料