（一）ExtJs学习前的准备工作，及第一个Ext小例子HelloWorld

本教程的制作是基于我从零开始学习ExtJs到正式在项目中应用的整个学习过程和方法，其中肯定会有许多不足之处，还请大家多多批评指正。

1.先在网上下载ExtJs相关资源，我在(1-5节)用的是ExtJs3.0的版本 3.0下载，以后的我将用ExtJs.4.0，ExtJs4.0对3.0做了兼容处理。4.0下载

2.解压下载的rar文件。解压后的文件打开如图所示：

3.该文件复制到您的项目中，然后就可以使用ExtJs了。接下来让我们开启ExtJs学习旅程吧。

4.ExtJs第一个例子HelloWorld

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>extHelloWorle.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 引入ExtJs时需要引入的包 -->
	<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../../ext/ext-all.js"></script>
	<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
  	<script type="text/javascript">
  	   
            Ext.onReady(function () {
                Ext.Msg.alert("标题","Hello World！");
            });
       </script>
  </head>
  <body>
  </body>
</html>

效果图：

分析：MessageBox(或Msg)的alert()方法

alert( String title, String msg, [Function fn], [Object scope] )

这是alert的方法的官方声明，title是定义弹出框的标题；msg是弹出框的显示内容；fn是回调函数，及弹出框关闭后执行的函数，该参数不是必须的，上述例子就没有该参数；scope是回调函数执行的范围，默认为window。

5.带有回调函数的alert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>extAlert.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="../ext1/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../ext1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext1/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.Msg.alert("标题","Hello World!",function(button){
				Ext.Msg.alert("提示","您的操作为:"+button);
			});
		})
	</script>
  </head>
  
  <body><strong>
  
 </strong> </body>
</html><strong>
</strong>

效果