Ext入门的第一个程序（1）
1、Ext是什么？
extjs是集UI和ajax框架与一身的，界面又好看，又有很强的ajax交互功能，适合不会做漂亮页面的程序员用的，缺点就是太大了，要导入近800KB左右的js和css文件，这对于web应用来说是一个比较大的开销
2、常见的一段代码和他们的效果
Ext.onReady(function(){
Ext.Msg.alert("Title","Hi baby.");
});
Ext.onReady(function() {
v = new eoms.form.Validation({form:'theform'});
});
Ext.onReady(function(){
ref = new Ext.LoadMask(Ext.getBody(), {msg:"正在刷新数据请稍后..." });
Ext.MessageBox.buttonText.ok = "确定";
Ext.MessageBox.buttonText.cancel = "取消";
var menubar = new Ext.Toolbar({
cls : 'oli-panel-header',
items:['当前位置:', '-',
{
id:'bbbzd1',
text:'发起考试',
iconCls: 'bbbzd1',
handler:function(){try{top.ScreenCtl()}catch(e){}}
},'->',
{
id:'save',
iconCls: 'save',
text:'保存',
handler:function(){save();}
}, '-',
{
id:'addnew',
iconCls: 'addnew',
text:'继续添加',
handler:function(){addNew();}
}, '-',
{
id:'back',
iconCls: 'back',
text:'返回',
handler:function(){back()}
},'-'
]
});
menubar.render('riskAlarmBar');
});
上述效果图类似下面的，一般的系统中，刚进入就是 一个列表的页面，列表上面有标题，右上角有按钮，类似如下的
3.具体的使用方法
要使用ExtJS，先要得到ExtJS库文件，ExtJS库文件可以到ExtJS官网下载，地址是www.extjs.com/products/gxt/download.php，把下载得到的ZIP压缩文件解压，可以得到以下内容,
adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。 build： 压缩后的ext全部源码(里面分类存放)。 docs： API帮助文档。 exmaples：提供使用ExtJs技术做出的小实例。 resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。 source： 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 Ext-all.js：压缩后的Ext全部源码。 ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。 ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。 ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。
得到ExtJS库文件后，就可以将extjs应用到页面当中了。应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是 extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成 adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype- adapter.js等。
因此，要使用ExtJS框架的页面中一般包括下面几句：
一般情况下我们就使用下面的三个：
<link rel="stylesheet" type="text/css" href="F:/extjs/ext-all-2.2.css" /> <script type="text/javascript" src="F:/extjs/ext-base-2.2.js"></script> <script type="text/javascript" src="F:/extjs/ext-all-2.2.js"></script>
在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：
<script type="text/javascript">
function fn(){
alert("Ext已经加载");
}
Ext.onReady(fn);
</script>
或者：
<script type="text/javascript">
function fn(){
alert("Ext已经加载");
}
Ext.onReady(function(){
alert("Ext已经加载");
});
</script>
下面我们写一个简单的代码程序：弹出警告对话框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> ext_exsample </title>
</head>
<link rel="stylesheet" type="text/css" href="F:/extjs/ext-all-2.2.css" />
<script type="text/javascript" src="F:/extjs/ext-base-2.2.js"></script>
<script type="text/javascript" src="F:/extjs/ext-all-2.2.js"></script>
<script type="text/javascript">
Ext.onReady(
function(){
Ext.MessageBox.alert("标题","内容");
}
);
</script>
<body>
</body>
</html>
效果如下：
例子二：弹出窗体
<script>
Ext.onReady(function () {
//弹出警告对话框.
//Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!");
//弹出Window窗体.
var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' });
win.show();
});
</script>
效果如下：
这只是一个简单的实例，要想做出复杂的功能还需要学习很多知识，在后续中将介绍ExtJS类库和组件介绍，希望大家继续关注，一起研究，共同进步！
