二、第一个ExtJS程序:helloExtJS
开发前的准备
下载并解压ExtJS包后,可以得到下图的文件目录结构:
在实际开发过程中并不需要所有的文件和目录,所需的包含如下目录即可:
若使用eclipse进行开发,只需将上述文件复制到WebRoot目录或其子目录。
开始
- 新建firstextjs.html
- 在使用ExtJS之前,需要在页面引入相应的样式和js文件,一般包括的最小集合是这样:ext-all.js,adapter/ext/ext-base.js,locale/ext-lang-zh_CN.js和整个resources目录。
-
ext-all.js,adapter/ext/ext-base.js 就包含了ext的所有功能,所有的js脚本都在这里了。
-
locale/ext-lang-zh_CN.js 是中文翻译。
-
resources目录下是css样式表和图片。
- 注意js文件的导入顺序
-
- 编写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后,可以正常显示:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。