Ext JS简介(一)

一、简介 

   Ext JS通常简称为EXT,是一种用JavaScript编写的功能强大的Ajax框架,与 后台技术无关,可用于开发绚丽多彩的富客户端Ajax应用。对于企业应用系统,尤其是MIS类型的系统而言,EXT非常适用。对于没有美术功底的程序员来说,EXT为我们解决了一大难题,因为它天生拥有绚丽的外表。同时,有很多用其他技术无法实现或极难实现的功能,却能用EXT轻易实现,比如EXT中的表格、树形、布局等控件能为我们的日常开发工作节约大量的时间和精力。

二、EXT发布包结构

*    adapter目录:放置的是EXT的核心代码和底层库,包括JQuery、Prototype和YUI的适配器;

*    build目录:放置的是EXT压缩后的代码,经过压缩的代码,体积更小,加载更快;

*    docs目录:是EXT的文档,其实最主要和最重要的是EXT的API,EXT离不开它;

*    examples目录:官方的演示示例,是初学者学习EXT的最佳途径之一;

*    resources目录:是EXT要用到的图片文件和样式文件,EXT绚丽的外观全部由这个目录中的文件所控制;

*    source目录:是EXT的源码文件,也就是相对build目录而言,未经过压缩的代码;

*    CHANGES.html文件:版本修正的列表文件;

*    ext-all.js文件:EXT的核心库,是必须引入的;

*    ext-all-debug.js文件:是ext-all.js的调试版,在调试时需要使用到调试版;

*    ext-core.js文件:EXT的核心库,是必须引入的;

*    ext-core-debug.js文件:是ext-core.js的调试版;

*    INCLUDE_ORDER.txt文件:说明了在页面上引入底层库的Java Script文件的顺序;

*    LICENSE.txt文件:是EXT的使用许可文件。

三、注意事项

(1)有些示例用Ajax从后台读取数据,如果该示例不在服务器上,Ajax就会一直返回失败状态,从而无法获得任何数据,所以就看不到正确的效果。

(2)把EXT应用到项目中,需要自己整理一下,因为发布包里的内容并非都是必需的,比如文档、示例和源代码,必需内容至少应包含:ext-all.js、adapter/ext/ext-base.js、build/locale/ext-lang-zh_CN.js和整个resources目录。

1.ext-all.js和adapter/ext/ext-base.js已经包含了EXT的所有功能,所有 JavaScript脚本都在这里;

2.build/locale/ext-lang-zh_CN.js是简体中文国际化资源文件;

3.resources目录下是CSS样式表和图片;

4.只要自己的项目中包含上述,就可以使用EXT了。使用时,在页面中导入下面的代码:

导入时,请注意JavaScript脚本的顺序。

(3)EXT里经常用一张空白图片作为占位符,然后用CSS里配置的背景图片显示,这样有利于更换主题。这张空白图片的名字就是Ext.BLANK_IMAGE_URL,默认情况下它的值是BLANK_IMAGE_URL:“http:/”+"/extjs.com/s.gif"。图片虽然很小,但是也需要从网上下载,一旦下载失败,就会显示找不到图片。要解决自己写的示例找不到图片的,只需要参照examples.js中的方法,修改自己项目的s.gif的本地路径即可

(4)辅助开发工具

1.调试工具Firebug:推荐使用FireFox和Firebug的组合。Firebug可以显示动态生成的DOM,甚至可以在Firebug里直接对DOM进行修改,而这些修改会反映到显示上;通过Firebug提供的Console,可以直接执行JavaScript脚本,也可以配置console.debug、console.info和console.error等日志方法,以便于跟踪;Firebug可以查看Ajax发送和接受的各种信息,还可以查看发送的参数以及返回的状态和信息。EXT开发者倾向于使用FireFox进行开发,因为有些应用在FireFox上运行良好,在IE中运行却会出现问题。所以我们还是需要让自己的项目能在IE中正常运行,这要求我们能编写出跨浏览器的JavaScript。

2.开发利器Spket:是一款全面支持JavaScript、XUL/XBL、Flex、SVG以及Yahoo!Widget的免费开发工具。它体积小巧,既可以作为Exlipse的插件,又可以作为独立的IDE。除Spket之外,在EXT开发时用得较多的IDE还有JSEclipse以及Apatans。

转载于:https://my.oschina.net/tobeexpertismydream/blog/2990294

你可能感兴趣的:(Ext JS简介(一))