二、第一个ExtJS程序:helloExtJS

来源：互联网发布：芜湖县淘宝产业园编辑：程序博客网时间：2024/06/05 09:40

开发前的准备

下载并解压ExtJS包后，可以得到下图的文件目录结构：

在实际开发过程中并不需要所有的文件和目录，所需的包含如下目录即可：

若使用eclipse进行开发，只需将上述文件复制到WebRoot目录或其子目录。

开始

新建firstextjs.html
在使用ExtJS之前，需要在页面引入相应的样式和js文件，一般包括的最小集合是这样：ext-all.js，adapter/ext/ext-base.js，locale/ext-lang-zh_CN.js和整个resources目录。
1. ext-all.js，adapter/ext/ext-base.js 就包含了ext的所有功能，所有的js脚本都在这里了。
2. locale/ext-lang-zh_CN.js 是中文翻译。
3. resources目录下是css样式表和图片。

编写html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>第一个ExtJS程序</title><link rel="stylesheet" type="text/css" href="script/resources/css/ext-all.css" /><script type="text/javaScript" src="script/adapter/ext/ext-base.js"></script><script type="text/javaScript" src="script/ext-all.js"></script><script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">/* Ext.onReady(function(){var d = new Date();var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();Ext.MessageBox.alert('报时','现在的时间是：'+time);});  *///onReady方法在页面完毕时调用初始化函数：也就是onReady的第一个参数指定的函数Ext.onReady(function(){Ext.MessageBox.alert('helloworld','这是我的第一个ExtJS程序');});</script></head><body></body></html>

最终效果

至此，第一个ExtJS程序就搞定了。过程中一定要仔细认真，不要出现低级错误。我就是在引入js文件时路径写错了，搞了大半天o(︶︿︶)o 。不过不明白为什么最后的显示效果还是那么丑。囧

修改：

之前在resources目录下没有导入images，导致显示有问题。新的目录结构：

重新导入images后，可以正常显示：

0 0