第一章 Extjs开发环境(入门教程)

第一章 Extjs开发环境(入门教程)

 

配置Extjs开发环境很简单的，完全可以在Html静态页面运行，需要的开发工具也很简单。

 

步骤如下：

1：到官方网站http://www.extjs.com/products/extjs/download.php下载必要的核心包。

2：解压Extjs3.1.rar文件(本人用的是3.1版本)。

3：在Html页面中引入相应文件，如下：

Java代码  

1. <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css">  
2. <script type="text/javascript" src="../Ext/ext-base.js"></script>  
3. <script type="text/javascript" src="../Ext/ext-all.js"></script>    

   ext-all.css 是样式文件。
   ext-base.js 是Extjs的基础包必须放在ext-all.js的前面。
   ext-all.js 是Extjs的核心包。

 

4：开始创建一个Extjs的Window组件。

 

代码如下：

Js代码  

1. <script type="text/javascript">         
2.         Ext.onReady(function(){  
3.             var win = new Ext.Window({  
4.                 title : "Ext.Window",  
5.                 resizable : false,  
6.                 width : 350,  
7.                 height : 300,  
8.                 html : "Hi, my name is Ext.Window!",  
9.                 buttonAlign : "center",  
10.                 buttons : [{text:"setTitle"},{text:"close"}]  
11.             });  
12.               
13.             win.show();  
14.         });  
15. </script>  

 

代码解释：Ext.onReady(),Extjs的代码都放在里面进行解释执行，这是必须的。在里面var一个Ext.Window,然后调用一个show方法，就这么简单，Window就出来的。(下一章将结合API对本例子进行API解释，可以让大家熟悉API的使用)