ExtJS学习笔记-01

很早就体验过ext的强大,但是一直忙于公司项目的开发没有机会好好深入学习一下。24日从网上订购的《深入浅出Ext JS》终于收到了。先不说书写的好坏,有本书做为参考和指导至少提高学习效率和质量是没有问题的。

由于平时大部分时间肯定会放在公司项目上,学习过程我打算是通过书的指引和网上查阅资料同步进行,我将在我的博客中记录我每天的学习内容做为备忘,同时也给感兴趣的朋友提供些思路,共同探讨共同学习的过程才是最快乐的!

下面就开始我的ExtJS学习之路吧……

第一章 Ext的下载和开发环境

Ext的下载地址:http://www.extjs.com/products/extjs/download.php

目前的版本是Ext JS 2.2.1

1.1 Ext的目录结构介绍:

adapter Ext核心代码和底层库,包括jQuery,Prototype和YUI的适配器
build Ext压缩后的代码,压缩的代码体积小,加载快。
docs Ext的文档,最重要的是Ext的API。
examples 这个不用多说了,是Ext提供的例子,是初学必看!
resources 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 此文件说明在使用时引用底层库文件(js)的顺序。
LICENSE.txt 这个不用多说了,是Ext的使用许可文件。


1.2 Ext开发环境的准备:

日常我们项目是基于java、php环境开发的,我把Ext放在了我已经配置好的Apache服务器上了,建立了一个虚拟目录专门供学习使用,关于如何安装和配置Apache服务器就不在我本次的学习范围之内了,朋友们如果还不太了解,可以在网上搜索一下相关资料。
我配置好的访问地址是:http://localhost:81/ext/examples/samples.html
这样我就可以查看Ext自带的API和示例了。

1.3 Ext开发辅助工具的准备:

Firefox + Firebug + Spket
虽然目前IE占据70%以上的市场份额,但是Firefox和Firebug的组合更让我们在调试javascript时提供的便利赞不绝口,因此学习前端脚本开发还是推荐这个组合的,但是我们不能忘了IE还是老大,最终我们还是需要编写健壮的跨浏览器的javascript。
关于这部分的安装和使用我在这里也就不再重复,对于开发前端脚本的朋友一定不会陌生,如果是初出茅庐,没关系,搜索一下网上的资料吧,很快搞定。下面附上下载地址。

但是在这里得提一下Spket这个东西,它可以基于Eclipse3.2以上版本的插件安装,也就是说像以往安装Eclipse插件那样轻松安装。还可以作为一个独立的IDE使用。不过,独立IDE需要运行在JDK1.5版以上。下载文件为spket-1.6.*.jar,安装步骤如下:
(1) 打开cmd控制台。(开始->运行->输入cmd回车)
(2) 命令进入spket-1.6.*.jar文件所在目录下输入java -jar spket-1.6.*.jar
(3) 回车后便可看到安装界面,这里会选择是作为Eclipse的插件还是独立作为富客户端运行,默认选择前者。
(4) 之后是一步一步往下安装即可,安装成功后会看到一个和EclipseIDE非常相似的界面,使用方式也基本相同。

Firefox: http://www.mozillaonline.com/
Firebug: https://addons.mozilla.org/zh-CN/firefox/addon/1843
Spket: http://www.spket.com/

1.4 体会Ext精彩由此开始:“Hello World”

第一个Ext程序,当然不能免俗的……,我们叫它“Hello World”。
这个程序的顺利执行也将意味着我们针对Ext的环境搭建和开发准备工作顺利完成啦!

第一步:我们在examples目录中新建一个helloworld目录(为了方便学习我就和Ext提供的例子放在一起了),在新建目录helloworld下新建一个helloworld.html文件,代码如下:

<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>

<script language="javascript">
Ext.onReady(function(){
    Ext.MessageBox.alert('helloworld', 'Hello World.');
});
</script>

保存文件,在Firefox中打开http://localhost:81/ext/examples/helloworld/helloworld.html

01-04-01-02
出现上面的提示窗口,我们的第一步工作就顺利结束啦~

1.5 究竟一个应用Ext中哪些文件是必需的?

首先,文档、示例和源代码文件可以休息啦!这些是你需要学习和查阅的时候为你服务就可以了。
那么,一个应用必需内容至少应包括:

1. ext-all.js
2. adapter/ext/ext-base.js
3. build/locale/ext-lang-zh_CN.js 这个是简体中文国际化资源文件
4. 整个resources目录

注意的是,引用这些文件时注意javascript脚本的顺序。一般是:
先引入样式/resources/css/ext-all.css
接着ext-base.js
再是ext-all.js
最后是ext-lang-zh_CN.js

好了,到这里等于是学习的基本条件具备了。看着helloworld程序的成功运行,再次感到Ext界面的绚丽和功能的强大!
跟着《深入浅出ExtJS》的思路,配合着网上资源的帮助,从此刻开始正式揭开Ext神秘面纱……

posted @ 2009-03-01 00:18 笑天.net 阅读(...) 评论(...) 编辑 收藏