JsExt入门
1. Ext发布包
Ext是一款富客户端开发框架,它基于JavaScript、HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果。可以从 http://www.sencha.com/products/extjs/ 免费获得Ext发布包,其中源代码、API文档和示例一应俱全。
2. Ext发布包目录说明
adapter:该目录下是Ext的核心代码和底层库,包括jQuery、Prototype和YUI的适配器。
docs:该目录下是Ext的文档,最主要和最重要的是Ext的API,开发中离不开它。
examples:该目录下是官方的演示示例,是入门的最佳途径之一。
pkgs:该目录下是Ext压缩后的代码,经过压缩的代码,体积更小,加载更快。
resources:该目录下是Ext要用到的图片文件和样式文件,Ext的外观全部由这个目录中的文件控制。
src:该目录下是Ext的源码文件,也就是相对pkgs目录而言,未经过压缩的代码。
ext-all.js:是Ext的核心库,是必须引入的。
ext-all-debug.js:是ext-all.js的调试版,在调试时使用这个调试版本的文件才能正确定位出现错误的位置。
INCLUDE_ORDER.txt:用来说明在页面上引用底层库的JavaScript文件的顺序。
LICENSE.txt:是Ext的使用许可文件。
3. 在项目中使用EXt
如果想把Ext应用到项目中,那么需要自己整理一下,因为发布包里的内容并非都是必须的,比如文档、示例和源代码。 必须内容至少应包括:
<link rel="stylesheet" type="text/css" href="${放置Ext的目录}/resources/css/ext-all.css" />
<script type="text/javascript" src="${放置Ext的目录}/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${放置Ext的目录}/ext-all.js"></script>
<script type="text/javascript" src="${放置Ext的目录}/src/locale/ext-lang-zh_CN.js"></script>
注:(1)ext-all.js和ext-base.js已经包含了Ext的所有功能,所有的js脚本都在这里。
(2)ext-lang-zh_CN.js是简体中文国际化资源文件。
(3)resources目录下是CSS样式表和图片。
4. 为什么页面提示“找不到图片”
Ext里经常用一张空白图片作为占位符号,然后用CSS里配置的背景图片显示,这样有利于更换主题。这张空白图片的名字就是Ext.BLANK_IMAGE_URL,默认情况下它的值是BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif "。图片虽然很小,但是也需要从网上下载,一旦下载失败,就会显示找不到图片。 在examples目录下的示例,每个示例都引用了../shared/examples.js,在这个examples.js的第一行就已经设置了 Ext.BLANK_IMAGE_URL='http://www.cnblogs.com/resources/images/default/s.gif'。所以,要解决自己写的代码找不到图片的问题,只需要参照examples.js中的方法,修改自己项目中的s.gif的本地路径即可。
5. 辅助开发
调试工具:Firebug
posted on 2013-01-14 15:54 时间给了够幸福的结局 阅读(603) 评论(0) 编辑 收藏 举报