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

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

 

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

 

步骤如下：

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

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

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

<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css">
<script type="text/javascript" src="../Ext/ext-base.js"></script>
<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组件。

 

代码如下：

<script type="text/javascript">    	
		Ext.onReady(function(){
			var win = new Ext.Window({
				title : "Ext.Window",
				resizable : false,
				width : 350,
				height : 300,
				html : "Hi, my name is Ext.Window!",
				buttonAlign : "center",
				buttons : [{text:"setTitle"},{text:"close"}]
			});
			
			win.show();
		});
</script>

 

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

 

 

运行效果图