第一:下载ExtJs
官方最新版本下载(截至2008-04-21):http://extjs.com/deploy/ext-2.0.2.zip
第二:解压ExtJs压缩包解压后的目录如下图所示,其中的demo为新建的目录。
第三: 在demo文件夹中新建一个文件1.2a_helloword.html
内容如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
alert('Hello World!');
});
</script>
</head>
<body>
</body>
</html>
用浏览器浏览这一个文件,如果看到下面这一个界面,恭喜你,你的第一个ExtJs完成了。
简单解释一下上面代码
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
这一个是引入ExtJs的默认样式
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
ExtJs所需要的核心脚本全部都在这两个js文件中。
<script type="text/javascript">
Ext.onReady(function(){
//页面初始化代码
});
</script>
Ext.onReady(function(){
//页面初始化代码
});
</script>
Ext.onReady 是指在整个页面加载完后执行。
第四: 绚丽效果的弹出框
上面(1.3.3)只是告诉你环境配置成功了,下面我们来看一下ExtJs中的弹出框的效果。
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('Message', 'Hello World ! ');
});
</script>
</head>
<body>
</body>
</html>
效果图如下:
资源应用:
http://hi.baidu.com/%BF%D7%B7%B1%E1%AA/blog/item/ef79656e395b10dd80cb4a30.html