ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s 应用更加具有活力及生命力。ExtJS
是一个用javascript 编写，与后台技术无关的前端ajax 框架。
学习Extjs就要从基础组件开始学起，通过小例子进行一步一步的学习。
1.首先到Extjs官网进行下载Extjs的包http://extjs.org.cn/node/3，本人自学的是ExtJs-2.0.2。
2.对于Extjs来讲，如果要进行开发，就要进行导入相应的js文件
（1）导入adapter文件夹中的ext中的ext-base.js文件。即adapter/ext/ext-base.js;
（2）导入ext-all.js文件。
（3）导入resources包，里面有很多css布局文件，目前我们需要的就是ext-all.css文件
（4）如果涉及到中文，那就需要导入ext-lang-zh_CN.js这个包。
3.创建HTML文件，文件中一般都按照如下方法进行配置Extjs（我是把所需要的.js文件都放在同级的extjs文件夹中）
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
4.第一个实例：HelloWorld经典程序
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert("这是第一个Extjs程序","HelloWorld");
});
</script>
这就是简单的一个Extjs程序。
5.应用实例1-5：
实例1：确定+取消按钮
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.confirm("选择","请选择",callback);
});
function callback(id){ //id的值就是button上面的值，yes或是no
if(id=="yes"){
Ext.MessageBox.alert("yes："+id);
}else{
Ext.MessageBox.alert("no："+id);
}
}
</script>
实例2：text文本框
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.prompt("填写","写点什么东西吧",callback);
});
function callback(id,text){ //这个id的值就是button上面的值，但是不同于上个例子，id值为ok和cancel，text表示文本框中的内容
if(id=="ok"){
Ext.MessageBox.alert("yes："+text);
}else{
Ext.MessageBox.alert("cancel："+text);
}
}
</script>
实例3：文本域
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.show({ title:"文本域",msg:"要显示的容",height:300,width:300,
buttons:Ext.MessageBox.OKCANCEL,//显示button
multiline: true, //文本域显示为true
fn: callback}); //fn是Extjs特有的函数，可以指示处理的函数名
});
function callback(id,text){ //这个id的值就是button上面的值,id值为ok和cancel，text表示文本域中的内容
if(id=="ok"){
Ext.MessageBox.alert("yes："+text);
}else{
Ext.MessageBox.alert("cancel："+text);
}
}
</script>
实例4：自定义button
<script type="text/javascript">
Ext.onReady(function(){
//将button组件的三个按钮yes，no，cancel定义为“是的”，“不的”，“取消了”
Ext.MessageBox.show({title:"自定义button",buttons:{yes:"是的",no:"不的",cancel:"取消了"},fn:callback});
});
function callback(id){ //这个id的值就是button上面的值,id值为yes、no、cancel
if(id=="ok"){
Ext.MessageBox.alert("yes："+id);
}else if(id=="no"){
Ext.MessageBox.alert("no："+id);
}else{
Ext.MessageBox.alert("cancle："+id);
}
}
</script>
实例5：进度条
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.show({title:"进度条",msg:"加载中....",width:300,progress:true,closable:false});
var f = function(v){return function(){
if(v==20){
Ext.MessageBox.hide();
Ext.MessageBox.alert("加载完成");
}else{
var i = v/19;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+"%已完成");
}
};
};
for(var i=1;i<21;i++){
setTimeout(f(i),i*500);//休眠时间，也就是进程条的读条速度
}
});
</script>