EtJS教程 初级很好的例子.doc

第 1 章 闪烁吧！看看 extjs 那些美丽的例子。 第 1 章 闪烁吧！看看 extjs 那些美丽的例子。 1.1. 一切从 extjs 发布包开始 非常幸运的是，我们可以免费去 下载 ext 发布包，里边源代码，api 文档，例子一应俱全。不过要是想访问 svn 获得最新的代码，就要花钱了。不过 我们现阶段只要这个免费的发布包就可以了，通过里边的范例，可以让我们体验 一下 ext 的风范。 下载地址：/download。到写文档的此时此刻，咱们可以 选择ext-1.1.1 或者是ext-2.0 下载。明显可以看出来ext-2.0 的版本高，12 月 4 日终于正式发布了，尚未经过详细测试，所以不敢说什么。下面我们把两个版 本都介绍一点儿。 1.2. 看看 ext-1.1.1 的文档 docs 目录下是 api 文档，基本上所有的函数，配置，事件都可以在里边找到， 直接打开 index.html 就可以查看，左侧菜单还包含了对 examples 目录下例子的 引用，不过有些例子需要使用 json 与后台做数据交换，必须放到服务器上才能 看到效果。还有一些后台代码是使用 php 编写的，如果想看这些例子的效果，还 需要配置 php 运行环境。 如果你用 java，而且 jdk 在 1.5 以上，不如直接装个 resin-3 方便，它可以跑 php 呢。 1.3. 看看 ext-2.0 的文档 api 文档依然在 docs 目录下，虽然可以看到左边的菜单，但是点击之后，右侧 的 api 页面都是靠 ajax 获得的，所以不能直接在本地查看了，你必须把整个解 压缩后的目录放到服务器上，通过浏览器访问服务器，才能看到。 问为什么 docs 打不开，只能看到一直 loading 的兄弟，都是因为没把这些东西 放到服务器上的原因。 2.0 中的 api 文档中没有例子的链接了，你需要自己去 examples 目录下找你需 要的例子，然后打开看，当然还是有一些例子需要放在服务器上才能看到效果。  1.4. 为什么有的例子必须放在服务器上才能看到效 果？ 因为有些例子里，用到 Ajax 去后台读取数据，如果没在服务器上，Ajax 返回的 状态一直是失败，也无法获得任何数据，所有就看不到正确的效果。不过以前在 论坛上看到过有人写了 localXHR，可以让 ajax 从本地文件系统获得 数据，这样也许就可以摆脱服务器的束缚了。 1.5. 为什么自己按照例子写的代码，显示出来总找不到 图片 ext 里经常用一个空白图片做占位符号，然后用 css 里配置的背景图片做显示， 这样有利于更换主题。这个空白图片的名字就是 Ext.BLANK_IMAGE_URL，默认情 况下它的值是 BLANK_IMAGE_URL : http:/+//s.gif。虽然图片很 小，也要去网上下载，一旦下载失败就显示找不到图片了。 看到这里可能有人奇怪了，为什么 examples 下的例子没有找不到图片的问题呢？ 看来你没有仔细看例子那些代码呢，每个例子都引用了../examples.js。在 examples.js 里设置了 Ext.BLANK_IMAGE_URL = ../../resources/images/default/s.gif;。所以要解决自己写的例子找不到 图片的问题，只需要照 examples.js 里修改 s.gif 的本地路径就可以了。很简单 吧？ 1.6. 我们还需要什么？ ? 介于本人对 firefox 的喜爱，以及 firebug 在调试 js 过程中的便利，隆 重向您推荐 firefox+firebug 的开发组合。再说了 ext 开发者也都是倾向 于 firefox 开发的，所以一般都是在 firefox 上跑的好好的，放到 ie 上 就出问题。这也跟 ie 自身的问题有些关系，可是目前 ie 占据 90%的浏览 器市场，最后我们还是需要让自己的项目在 ie 上跑起来，所以要求我们 能写出跨浏览器的 js 来。 firebug 的好处在于，可以显示动态生成的 dom，你甚至可以在 firebug 里直接对 dom 进行修改，而这些修改会直接反应到显示上。太厉害了 firebug 提供的 console，可以直接执行 js 脚本，配置 console.debug， ，console.error 等日志方法更便于跟踪。 对于 ajax 发送接收的数据，firebug 都可以显示出来，并且可以查看发 送的参数，以及返回的状态和信息。  1.7. 入门之前，都看 helloworld。 为了照顾连最基本应用都跑不起来的同志，我们给出两个入门版 helloworld 范 例，并结合讲解，领你入门呢。 1.7.1. 直接使用下载的发布包