Extjs开发环境(入门教程)

来源：互联网发布：塞班论坛软件下载编辑：程序博客网时间：2024/06/01 09:22

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

步骤如下：

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

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

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

Java代码

<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>

<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组件。

代码如下：

Js代码

<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>

<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的使用)