码迷,mamicode.com
首页 > Web开发 > 详细

二、第一个ExtJS程序:helloExtJS

时间:2014-08-27 00:07:16      阅读:388      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   java   使用   io   strong   

开发前的准备

下载并解压ExtJS包后,能够得到下图的文件文件夹结构:

 

bubuko.com,布布扣

 

在实际开发过程中并不须要全部的文件和文件夹,所需的包括例如以下文件夹就可以:

bubuko.com,布布扣

 

若使用eclipse进行开发,仅仅需将上述文件拷贝到WebRoot文件夹或其子文件夹。

 

bubuko.com,布布扣

開始

  1. 新建firstextjs.html
  2. 在使用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样式表和图片。

      • 注意js文件的导入顺序
  3. 编写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>

  4. 终于效果

bubuko.com,布布扣

 

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


改动:

之前在resources文件夹下没有导入images,导致显示有问题。新的文件夹结构:

bubuko.com,布布扣

又一次导入images后,能够正常显示:

bubuko.com,布布扣


二、第一个ExtJS程序:helloExtJS

标签:style   blog   http   color   os   java   使用   io   strong   

原文地址:http://www.cnblogs.com/mengfanrong/p/3938401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!