EXT 学习文档
ext-1.1
部分原创/部分整理
第一章 EXT 入门
1.1 Ext简介
Ext在最开始的时候，是作为YUI的一个扩展存在的，所以那个时候它的名称是YUI.Ext，后来，Ext作为
一个独立的项目进行开发，并不再依赖于YUI。适合企业级开发，能实现复杂的Layout布局，界面效果可
以和backbase媲美，而且使用纯javascript代码开发。 真正的可编辑的表格Edit Grid，支持XML和Json数据
类型，直接可以迁入grid，有完整地说明文档。
1.2 下载Ext
如果你未曾下载过，那应从这里下载最新版本的 Ext http://extjs.com/downloads 。针对你的下载需求，有
几个不同的版本。通常地，最稳定的版本，是较多人的选择。最新的版本是 Ext2.0 ，本教程使用 ext-1.1
版本。
下载解包后，我们可以查阅ext目录下的docs中的文档配合example下是些实例文件进行学习。 在EXT目
录中，package目录是ext所有类库文件,在ext-all.js文件中已经包含了该目录下所有的类。因此我们开发中
只需要导入ext-all.js文件即可。Resources目录下有Ext所需要的图片文件和CSS样式文件。对于样式文件我
们只用到ext-all.css一个文件即可，它包含了所有Ext中样式的定义。在样式文件夹中还有三个Ext主题样式
文件xtheme-aero.css、xtheme-gray.css、xtheme-vista.css，我们可以选择自己喜欢的Ext风格，在今后我们
会详细讲到。
1.3 第一个例子
我们开始第一个例子，可以帮助你了解Ext的开发。
（1）首先我们建立项目目录，如C:\example1。
（2）在example1目录下建立js和css两个目录，用于存放JS文件和CSS样式文件。
（3）为了节省空间我们只把需要的文件拷贝到项目中：
将 EXT 目 录 中 resources\css\ 目 录 下 的 ext-all.css 、 xtheme-aero.css 、 xtheme-gray.css 、 xtheme-
vista.css文件拷贝到项目中CSS目录下。
将EXT目录中ext-all.js文件和adapter\ext\ext-base.js文件拷贝到项目中JS目录下。
拷贝EXT目录resources\中的images目录全部拷贝至项目目录中。
开发所必要的文件已经拷贝到项目中啦，以上导入操作今后不再提示。
接下来该编写代码来实现功能啦.Go...
（4）在js目录下新建hello.js,内容是：
Ext.onReady(function() {
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.alert('提示', '你好，中国');
});
});
（5）在根目录建立hello.htm,内容是：
<html>
<head>
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
<input type="button" id="mb1" value="点击我">
</body>
</html>
我们双击打开hello.htm页面，单击"点击我"按钮，你可以看弹出对话筐，效果如下：
Ext的界面很漂亮，可以替换传统的Alert(),我们分析以上代码。
先看hello.js文件,文件中Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后，
保证页面内的所有元素能被scrīpt引用。你可删除Ext.get('mb1').on()那行，加入一些实际用途的代码试
试：
Ext.onReady(function() {
..............
});
其中Ext.get('mb1').on()函数为页面中名称是mb1的元素注册事件,这个例子中是个Button
<input type="button" id="mb1" value="点击我">
当然可以是其他的元素。函数中有两个参数,第一个为要注册的事件名称，第二个是要执行的代码。
Ext.get('mb1').on('click', function(){.....})
也许你会觉察到我们并没有导入 xtheme-xxx.css 些文件的引用。这些文件是 Ext 提供的主题文件。我们
在 hello.htm 文件中导入一个样式文件试一试效果。
<html>
<head>
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<link rel="stylesheet" type="text/css" href="css/xtheme-vista.css">
<script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
<input type="button" id="mb1" value="点击我">
</body>
</html>
双击该页面，单击"点击我"按钮,你会看到如下 vista 样式的效果
还有其他的样式效果，可以根据自己喜欢选择。
xtheme-aero.css xtheme-gray.css
默认风格
