1.2.1 下载ExtJs压缩包

最新版本(截至2008-04-21):​​http://extjs.com/deploy/ext-2.0.2.zip​

1.2.2 解压ExtJs压缩包

解压后的目录如下图所示,其中的demo为新建的目录。

extjs 入门_css

1.2.3 在demo文件夹中新建一个文件1.2a_helloword.html

内容如下:



​01.​​​​<html>​


​02.​​​​<head>​


​03.​​​​<meta http-equiv=​​​​"Content-Type"​​ ​​content=​​​​"text/html; charset=iso-8859-1"​​​​>​


​04.​​​​<title>Hello World</title>​


​05.​​​​<link rel=​​​​"stylesheet"​​ ​​type=​​​​"text/css"​​ ​​href=​​​​"../resources/css/ext-all.css"​​ ​​/>​


​06.​​​​<script type=​​​​"text/javascript"​​ ​​src=​​​​"../adapter/ext/ext-base.js"​​​​></script>​


​07.​​​​<script type=​​​​"text/javascript"​​ ​​src=​​​​"../ext-all.js"​​​​></script>​


​08.​​​​<script type=​​​​"text/javascript"​​​​>​


​09.​​​​Ext.onReady(​​​​function​​​​(){   ​


​10.​​​​alert(​​​​'Hello World!'​​​​);​


​11.​​​​});​


​12.​​​​</script>​


​13.​​​​</head>​


​14.​​​​<body>​


​15.​​​​</body>​


​16.​​​​</html>​


 

用浏览器浏览这一个文件,如果看到下面这一个界面,恭喜你,你的第一个ExtJs完成了。

演示地址:​​http://extjs.org.cn/extjs/demo/1.2a_helloword.html​

效果图如下:

extjs 入门_css_02

简单解释一下上面代码


​1.​​​​<link rel=​​​​"stylesheet"​​ ​​type=​​​​"text/css"​​ ​​href=​​​​"../resources/css/ext-all.css"​​ ​​/>​


这一个是引入ExtJs的默认样式

 


​1.​​​​<script type=​​​​"text/javascript"​​ ​​src=​​​​"../adapter/ext/ext-base.js"​​​​></script>​


​2.​​​​<script type=​​​​"text/javascript"​​ ​​src=​​​​"../ext-all.js"​​​​></script>​


ExtJs所需要的核心脚本全部都在这两个js文件中。

 

 


​1.​​​​<script type=​​​​"text/javascript"​​​​>​


​2.​​​​Ext.onReady(​​​​function​​​​(){   ​


​3.​​​​//页面初始化代码​


​4.​​​​});​


​5.​​​​</script>​


Ext.onReady 是指在整个页面加载完后执行。

 

1.3.4 绚丽效果的弹出框

上面(1.3.3)只是告诉你环境配置成功了,下面我们来看一下ExtJs中的弹出框的效果。

代码如下:


​01.​​​​<html>​


​02.​​​​<head>​


​03.​​​​<meta http-equiv=​​​​"Content-Type"​​ ​​content=​​​​"text/html; charset=iso-8859-1"​​​​>​


​04.​​​​<title>Hello World</title>​


​05.​​​​<link rel=​​​​"stylesheet"​​ ​​type=​​​​"text/css"​​ ​​href=​​​​"../resources/css/ext-all.css"​​ ​​/>​


​06.​​​​<script type=​​​​"text/javascript"​​ ​​src=​​​​"../adapter/ext/ext-base.js"​​​​></script>​


​07.​​​​<script type=​​​​"text/javascript"​​ ​​src=​​​​"../ext-all.js"​​​​></script>​


​08.​​​​<script type=​​​​"text/javascript"​​​​>​


​09.​​​​Ext.onReady(​​​​function​​​​(){   ​


​10.​​​​Ext.MessageBox.alert(​​​​'Message'​​​​, ​​​​'Hello World ! '​​​​);​


​11.​​​​});​


​12.​​​​</script>​


​13.​​​​</head>​


​14.​​​​<body>​


​15.​​​​</body>​


​16.​​​​</html>​


 

演示地址:​​http://extjs.org.cn/extjs/demo/1.2b_helloword.html​

效果图如下:

extjs 入门_css_03

只是有一句代码不同而已,但是效果却相差了十万八千里。