ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。ExtJS有非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发，不过由于ExtJS使用js调取页面显示，所以对于优化不合适。
下面举个例子让我们更好的了解ExtJS工作原理：
ExtJS登录页面
加载extjs
<link rel=”stylesheet” type=”text/css” href=”ext/resources/css/ext-all.css” />
<script type=”text/javascript” src=”ext/adapter/ext/ext-base.js” ></script>
<script type=”text/javascript” src=”ext/ext-all-debug.js” ></script>
<script type=”text/javascript”>
//验证码刷新
function reloadcode(){
var verify = document.getElementById(‘safecode’);
verify.src = ‘php/code.php?’+Math.random();
}
//页面显示控件
LoginWindow = Ext.extend(Ext.Window,{
title:’登录系统’,//控件名称
width:275,//控件宽度
height:155,//控件宽度
collapsible:true,//可收缩
defaults:{
border:false
},
buttonAlign:’center’,
createFormPanel:function(){
//点击重置按钮触发函数
function reset(){
myform.form.reset();
}
//登录函数
function surely(){
if(myform.getForm().isValid()){
myform.form.submit({
waitMsg:’正在登录……’,
url:’php/login.php’,
timeout:3000,
success:function(form,action){
window.location.href = ‘index.html’;
},
failure:function(form,action){
Ext.MessageBox.alert(‘警告’,action.result.info);
}
});
}
}
//注册跳转
function register(){
window.location.href=”register.html”
}
//面板显示
var myform = new Ext.form.FormPanel({
bodyStyle:’padding-top:6px’,
defaultType:’textfield’,
labelAlign:’right’,
labelWidth:55,
labelPad:2,
method:’POST’,
keys:[{key:[10,13],fn:surely}],
defaults:{allowBlank:false,width:158},
items:[
{cls:’user’,name:’username’,fieldLabel:’帐 号’,blankText:’账号不能为空’},
{cls:’key’,name:’password’,fieldLabel:’密 码’,blankText:’密码不能为
空’,inputType:’password’},
{cls:’key’,name:’randCode’,id:’randCode’,fieldLabel:’验证码’,blankText:’验证码不能为
空’,width:70}
],
buttons:[{text:’登录’,id:’sure’,handler:surely},{text:’重置’,id:’clear’,handler:reset},{text:’注
册’,handler:register}],
});
return myform;
},
initComponent:function(){
LoginWindow.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});
Ext.onReady(function(){
Ext.QuickTips.init();
//加载控件
var win = new LoginWindow();
//显示控件
win.show();
//获得焦点
var bd = Ext.getDom(‘randCode’);
var bd2 = Ext.get(bd.parentNode);
//显示验证码
bd2.createChild({tag:’img’,src:’php/code.php’,align:’absbottom’,id:’safecode’,onclick:’javascript:reloadcode()’});
});
</script>
步骤：
1、首先是加载ExtJS的核心文件
2、创建控件，然后添加控件属性
3、显示控件
注意：
1、像Window,Editor,pannel等他们属于控件，其它的属于控件内的属性配置，属性配置很多是公用的，而且和html+css命名相同。
2、留意逗号，因为ie要求很严格，同时这样避免你找问题找很长时间
3、属性公用这一点能加速你学会extjs
4、边删除变看效果，这样你能知道其作用，同时结合html+css代码，就算猜也能猜到其作用
同时本人找到了中文版的ExtJS手册，我们可以具体根据手册给的来完成
手册下载地址 点击下载