Company
LOGO
Ext JS 实训教程
第一章、 ExtJS 简介
Ext1.0 发布于 2007 年 2 月，它提供了基本的表单、表格、树形、窗
口及布局等多种组件。本教程是基于 Ext3.0 以上版本的。于目前为
止已经发布了 Ext4.0 。
ExtJS 是一个很不错的 Ajax 框架，可以用来开发带有华丽外观的富客
户端应用，使得我们的 B/S 应用更加具有活力及生命力。
ExtJS 是一个用 javascript 编写，与后台技术无关的前端 Ajax 框架。
因此，可以把 ExtJS 用在 .Net 、 Java 、 Php 等各种开发语言开发的
应用中。
ExtJS 交流社区及相关资料网址： http://www.sencha.com
ExtJS 包含的包的简单介绍
adapter : Ext 的底层库和核心代码；
docs : Ext 提供的 API ；
examples : 官方提供的演示实例；
resources : 主要存放的是样式文件和图片文件；
ext-all : Ext 的核心库，是必须的。
src : 存放源码文件；
第二章、 ExtJS 开发利器 Spket
作用就不多说了，安装步骤如下：
（ 1 ）下载 Spket 后，将其下的两个文件夹 (features/plugins) 中的内容
分别放到 eclipse 安装文件的相应文件夹下。
（ 2 ）重启 eclipse ，点击工具栏 Window-> Preferences -> Spket ->
JavaScript Profiles - > 点击“ New…” 按钮，新建一个配置文件，如
Ext 。然后为 Ext 添加库“ Add Labrary” , 选择 ExtJs ，点击 OK 。再
点击“ Add File” 为 ExtJs 添加 .jsb 文件 ( 升级后的为 .jsb2) 。最后选
中“ Ext” 设置为默认。
（ 3 ）新建一个 .js 文件，如编写 Ext. 之后就会有提示了，大功告成。
第三章 开始 ExtJs 之旅
一个简单的 HelloWorld
<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" src="../examples.js"></script>
<script>
function helloWorld(){
Ext.Msg.alert("hello","Hello World ! so easy !");
}
Ext.onReady(helloWorld);
</script>
3.1 一个简单的 Panel 面板
Panel 面板也是最常用的组件，下面来看看一个简单的 Panel 面板。
Ext.onReady(function() {
var panel = new Ext.Panel({
el: ‘test’, // 对就元素的 ID
title: ‘ 测试标题’ , // 标题
floating: true, // 是否将此面板设为浮动，默认为 false
shadow: true, // 在面板后显示投影效果
draggable: true, //True 表示为激活此面板的拖动，默认为 false
collapsible: true, //True 表示为面板是可收缩的，默认为 false
html: ‘ 测试内容’ , // 显示内容
pageX: 100, //X 页面坐标
pageY: 50, //Y 页面坐标
width: 200,
height: 150
});
panel.render();
});
