《让我们开始extjs之旅》由会员分享，可在线阅读，更多相关《让我们开始extjs之旅（12页珍藏版）》请在金锄头文库上搜索。
1、第2章 让我们开始ExtJS之旅2.1 认识ExtJS的开发包开始ExtJS之旅的第一步是要获得开发包，可以从官方网站www.ExtJS.com下载，以保证获得最新版本。其下载地址是http:/www.ExtJS.com/download，下载成功后的开发包是ExtJS-2.0.2.zip，有6.08MB大。不过不用担心，这个包并不是ExtJS程序真正运行时必须要载入的，真正必须要载入的只是这个包中的2个js和1个CSS文件，共665KB。其实这个包中包括了很多有用的资源，在正式开始开发之前，有必要对这个包中的相关资源有所了解。图2-1就是解开ExtJS-2.0.2.zip之后的文件目录结构。
2、ExtJS-2.0.2开发包中有8个文件子包与8个文件，下面分别对这些资源进行简单介绍。 adapter目录中放置的是ExtJS的核心代码与底层库（如jquery和prototype）的适配器，ExtJS是可以做到动态切换底层库的，关键就在这里了。 air包含了ExtJS以air进行改进的代码库，还有以该代码库实现的任务管理实例。 build目录是ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。 docs中当然是ExtJS的文档了，其中最重要的是ExtJS的API，这是开发ExtJS程序过程中的法宝。 examples中是官方的演示示例，这里是初学者最好的学习乐园，通过对这些演示示列
3、的熟悉，就能很快掌握ExtJS开发。 package中是ExtJS各种组件的代码库，当使用到相关组件时，就需要引入这个目录中的组件实现库。 resources中是ExtJS要用到的图片文件与样式表文件，ExtJS引以为傲的漂亮外观就全部由这个目录中的文件所控制。 source目录是相对build目录而言的，就是build目录相关文件压缩处理前的版本。 .htaccess文件是访问控制文件，ExtJS利用该文件实现了对CSS、html和js文件的保护，防止被直接下载，当然这个需要服务器的支持。 CHANGES.txt文件是版本的修正列表文件。 ext-all.js文件是ExtJS的核心库，是必须
4、要引入的。图2-1 ExtJS开发包的文件目录结构14第2 章 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虽然只是简单的输出，但是它所要求的开
5、发与运行环境和工作流程与写一个大型软件所要求的环境和流程没有太大的差别。所以说重要的并不在显示或者输出Hello world，而是为成功显示或者输出这个Helloworld所经历的过程。对于ExtJS的学习，可以从Hello world开始，熟悉其开发与运行过程。ExtJS只是一套用JavaScript实现的界面层组件，所以在没有与服务器要进行数据交换的情况下，并不需要服务器的支持，在本地浏览器中就能运行得很好。第一个ExtJS程序Hello world不需要同服务器端进行通信，只要使用简单的HTML文件即可。如代码2-1所示。代码2-1ExtJS的Hello worldExtJS2-Hell
6、oWorldExt.BLANK_IMAGE_URL = ExtJS2/resources/images/default/s.gif Ext.onReady(function() Ext.MessageBox.alert(HelloWorld,Hello World!Hello World!Hello World!Hello World!); );代码2-1对于写过JavaScript程序的人来说并不难懂。除了HTML的框架之外，引入了1个CSS文件，2个js文件，这3个文件是做ExtJS开发必须引入的。在Body部分，有一段js代码，对于这段代码的具体意义现在并不用过分地关注，这在以后的章节中
7、会有更加详细的说明。将这段代码保存为ExtJS-HelloWorld.html文件，为了正常地引入必须的资源，需要特别注意这个文件要存放的路径，它应该放到ExtJS开发包的同一级，如图2-2所示。图2-2 HelloWorld放置的位置如图2-2所示，这就是文件放置的路径，其中ExtJS2目录就是图2-1所示的内容。好了，程序已经写完，可以看看运行效果了。只要双击ExtJS-HelloWorld.html文件，就会自动打开浏览器，但是由于这是JavaScript程序，在浏览器上会被浏览器阻止，如图2-3所示。图2-3 浏览器会阻止ExtJS程序的运行此时，只要如图2-3所示那样，选择“允许阻止
8、的内容” ，程序就会正常运行，并出现如图2-4所示的界面，表明ExtJS程序已经完全正常运行了。虽然简单，但是惊喜才刚刚开始，简单的对话框就已经如此的漂亮。图2-4 Helloworld程序运行结果2.3 ExtJS中的基本概念在第1章中提到过，ExtJS和传统的Web开发大不相同。特别是在界面开发上，不用再纠缠在HTML和CSS中，而与Java Swing或者Delphi的开发方式非常相同。这样在ExtJS的开发中会有一些在传统Web开发中没有的概念，如面板（Panel） 、布局（Layout） 、组件（Component）让我们开始ExtJS之旅15等。本节对这些概念加以说明，为后续的学习
9、打好概念上的基础。 面板Panel：面板是一块区域，程序员可以在之上放置各种组件，从而形成用户界面。说得形象一点，面板就是空白的画板，程序员是画家，最终画板上会出现什么，决定于画家。当然作为面板来说，最终展现在上面的不是水墨国画，而是各种ExtJS的组件。面板的出现解决了窗口（对于Web应用来说就是一个浏览器窗口）不方便直接分拆的问题。利用面板就能将窗口分割成多个部分，这样对窗口来说，它只需要管理好面板在窗口上的展现就可以了，不用再关心面板各种组件的展现了，因为这部分工作由面板自己来管理。很显然，面板的引入将复杂的问题进行了隔离，从而对软件开发的界面产生了深远的影响，特别是对软件界面能够跟随屏
10、幕大小自适应调整提供了非常好的解决方案。 布局Layout：布局是指组件在一个容器中的摆放方式。在讲到布局时肯定有一个容器，这是用来摆放的空间；同时也有需要摆放的组件，它是用来操作的实体。当容器指定了特定布局时，往容器中放置的组件，就会按规定的布局自动调整，这个过程不需要程序员的参与，从而能得到更加规范的用户界面。在ExtJS的布局与JavaSwing的布局基本一致，为实现丰富的用户界面提供了保证。 组件Component：组件是指已经预先实现好特定功能，并能够被重用到编程中的代码段以及相关资源。在ExtJS中，组件可以简单到一个按钮，也可以复杂到数据表格。组件将强大的功能带给普通的软件开发者
11、，大大的加快了软件的开发速度，同时也能保证更高的质量。除了开官方提供的精美好用的组件外，还有许多功能各异的第三方组件，并且还可以开发自己的特有组件。可以说ExtJS的编程就是组件编程，各种组件巧妙堆积在一起就成为了最后界面异常优美，功能强大的应用软件。 渲染Render：渲染是指含有ExtJS程序的页面下载完毕后在浏览器中完全展现出来的一个过程。作为普通的HTML页面也有渲染的过程，即HTML与CSS代码开始装载进浏览器到整个页面根据HTML与CSS规则完全显示出来的过程。但是在ExtJS中有完全不同于HTML与CSS渲染过程的地方，虽然ExtJS的界面最终也是以HTML与CSS来展现，但是这
12、些HTML与CSS不是从服务器下载而来，而完全是由ExtJS的引擎动态生成而来。所以ExtJS的渲染实际上是一个动态生成的过程，而非静态载入的过程。理解这一点在学习ExtJS编程的过程中将会有重大的指导意义。 窗口Window：ExtJS中的窗口并不是一个真正的Windows窗口，在本质上只是一个层利用CSS进行格式化，在外观和行为上都比较像真正的Windows窗口的显示区域。说到显示区域就应该想到面板，实际上在ExtJS的继承层次上，窗口组件就是继承于面板组件。明白了ExtJS中窗口的本质就是一个层的话，那么就一定要知道它与真正Windows窗口的不一样，如要将ExtJS窗口拖出到浏览器窗口
13、之外等想法显然就是不能实现的。只要知道到了这关键的一点，在做ExtJS中的窗口编程时将会带来莫大的帮助。 对话框Dialog：对话框也是在程序开发中经常用到的功能。一般有普通对话框、选择对话框、输入对话框以及一些特别的自定义对话框。在ExtJS中也提供了非常漂亮并且能够自定义的对话框，像ExtJS中的窗口一样，这些对话框的本质也是利用CSS进行格式化的16第2 章结果。所以在使用这些对话框时，要注意这些对话框与真正Windows中对话框的异同，灵活加以运用。2.4 非常有用的开发工具“工欲善其事，必先利其器” ，有好的工具往往能够事半功倍。对于软件开发来说，尤其如此。特别是像JavaScrip
14、t这种解释型执行的脚本语言，开发与调试过程都非常困难，必须要有强有力的工具加以支持。而开发过程中的工具以代码编辑与调试工具最为重要，两者的结合就是集成开发工具（IDE）了，但是以JavaScript实现的ExtJS似乎还没有非常优秀的集成开发工具加以支持。这不能不算是ExtJS非常大的一个缺陷，但还是有一些工具可以推荐，确实可以帮助更快更好地开发以ExtJS实现的软件。2.4.1 开发插件spketspket支持JavaScript、XUL/XBL、Laszlo、SVG and Yahoo! Widget等新产品，具有代码自动完成、语法高亮、内容概要等功能特点，可以帮助开发人员高效地创建Jav
15、aScript程序，它可以以一个独立的桌面应用程序运行或者以Eclipse的插件运行，从它的官方网站http:/ 下载最新的插件程序，当前最新的版本为spket-1.6.12.zip，解压后插件的目录结构如图2-5所示，将plugins目录和features目录分别复制到Eclipse的安装目录下，Eclipse3.2及以上版本都可以使用该插件，执行操作后已经完成该插件的安装，启动Eclipse，现在可以开始对spket进行必要的配置。Step2 启动Eclipse后进入WindowPreferences选项，在这里可以找到Spket菜单，其中包含了该插件的相关配置，选中JavaScript
16、Profiles项，会出现JavaScript配置列表，这里默认没有提供对ExtJS的支持，下一步会向列表中添加ExtJS库，如图2-6所示。图2-6 spket插件目录结构Step3 单击右侧的New按钮，在弹出的对话框中输入名称，单击OK按钮，如图2-7所示。让我们开始ExtJS之旅17图2-5 spket插件目录结构Step4 在列表中选中刚新建的配置名然后单击右侧的Add Library按钮，如图2-8所示。Step5 在出现的库列表中选择ExtJS选项，选择后单点击OK按钮，如图2-9所示。图2-9 设置JavaScript库选择配置列表Step6 选择列表中的ExtJS项，单击右侧的Add File按钮，如图2-10所示。Step7 在弹出的文件选择框中选择ExtJS库文件source目录下的ext.jsb文件， 然后单击 “打开”按
