第2章 让我们开始Extjs之旅.docVIP

第2章 让我们开始ExtJS之旅 通过前章的学习，从概念上对ExtJS有个了解。本章从开发包的安装开始讲解，通过Hello World来直观展示ExtJS的美妙之处。此外还介绍了相关的开发工具以及对原有JavaScript对象的扩展。本章开始正式进入ExtJS的开发学习。 本章内容提示： 认识ExtJS的开发包 也从Hello world开始 ExtJS中的基本概念 非常有用的开发工具 ExtJS对原有JavaScript对象的扩展 2.1 认识ExtJS的开发包 要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站www.ExtJS.com下载，以保证获得最新版本。其下载地址是http://www.ExtJS.com/download，下载成功后的开发包是ExtJS-2.0.2.zip，有6.08M之大。不过不用担心，这个包并不是ExtJS程序真正运行时必须要载入的，真正必须要载入的只是这个包中的2个js和1个CSS文件，共665KB。其实这个包中包括了很多有用的资源，在正式开始开发之前，有必要对这个包中的相关资源有所了解，图2-1就是解开ExtJS-2.0.2.zip之后的文件目录结构。 图2-1 ExtJS开发包的文件目录结构 ExtJS-2.0.2开发包中有8个文件子包与8个文件，下面分别对这些资源进行简单介绍。 Adapter目录中放置的是ExtJS的核心代码与底层库（如jquery，prototype）的适配器，ExtJS是可以做到动态切换底层库的，关键就在这里了。 air包含了ExtJS以air进行改进的代码库，还有以该代码库实现的任务管理实例。 build目录是ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快； docs中当然是ExtJS的文档了，其中最重要的是ExtJS的API，这是开发ExtJS程序过程中的法宝。 examples中是官方的演示示例，这里是初学者最好的学习乐园，通过对这些演示示列的熟悉，就能很快掌握ExtJS开发。 package中是ExtJS各种组件的代码库，当使用到相关组件时，就需要引入这个目录中的组件实现库。 resource中是ExtJS要用到的图片文件与样式表文件，ExtJS引以为傲的漂亮外观就全部由这个目录中的文件所控制。 source目录是相对build目录而言的，就是build目录相关文件压缩处理前的版本。 .htaccess文件是访问控制文件，ExtJS利用该文件实现了对CSS、html和js文件的保护，防止被直接下载，当然这个要需要服务器的支持。 CHANGES.txt文件是版本的修正列表文件。 ext-all.js文件是ExtJS的核心库，是必须要引入的。 ext-all-debug.js文件是ext-all.js的调试版，在调试时需要使用到调试版。 ext-core.js文件也是ExtJS的核心库，是必须要引入的。 ext-core-debug.js文件是ext-core.js的调试版。 INCLUDE_ORDER.txt文件对使用不同的底层库在引入js文件上的顺序说明。 LICENSE.txt文件当然就是ExtJS的使用许可文件了。 2.2 也从Hello world开始 几乎所有开发语言的学习都是从“Hello world”开始的。因为“Hello world”虽然只是简单的输出，但是它所要求的开发与运行环境和工作流程与写一个大型软件所要求的环境和流程没有太大的差别。所以说重要的并不在显示或者输出“Hello world”，而是为成功显示或者输出这个“Hello world”所经历的过程。 对于ExtJS的学习，可以从“Hello world”开始，熟悉其开发与运行过程。ExtJS只是一套用JavaScript实现的界面层组件，所以在没有与服务器要进行数据交换的情况之下，并不需要服务器的支持，就在本地浏览器中就能运行得很好。第一个ExtJS程序“Hello world”不需要同服务器端进行通讯，只要使用简单的Html文件即可。如代码2-1所示。 代码2-1：ExtJS的Hello world HTML HEAD TITLEExtJS2-HelloWorld/TITLE link rel=stylesheet type=text/css href=ExtJS2/resources/css/ext-all.css / script type=text/JavaScript src=ExtJS2/adapter/ext/ext-base.js/script script type=text/JavaScript src=ExtJS2/ext-all.js/script /HEAD BODY script Ext.BLANK_IMAGE_URL = E