Ext js介绍
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架,Ext JS的最初目的是对Yahoo_UI进行扩展,参考了java Swing的实现机制,主要的特色是界面效果表现力强,Ext JS属于一种Ajax框架,同类的Ajax框架有Prototype,Dojo,GWT。
建立Ext JS的开发环境
1.到Ext官网下载ext js程序包,现在最新版本是4.0,
2.下载开发工具Spket插件,至于为什么要下载Spket,因为在eclipse通过Spket插件有利于我们进行Ext js的开发。
对Ext的了解
要了解Ext js就是了解我们下载的Ext包
先来看一下Ext包结构(版本不同会有一些差别,我用的是4.0,下面介绍一下几个重要的文件)
docs:Ext API帮助文档;
examples:使用Ext技术做出的示例;
resources:ExtUI资源文件,如css、images文件;
source:无压缩的Ext全部源代码(里面分类存放);
ext-all.js:压缩后的Ext全部源代码;
ext-all-dubug.js:无压缩的Ext全部源代码(用于调试);
Ext js知识框架
1.Ext js类库
2.Ext js布局
3.Ext js组件
基本的知识点就包括以上几个方面(可以类似于Swing)
看一段示例代码
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
var login = new Ext.FormPanel({
labelWidth:80,
url:'user_login.action',
frame:true,
title:'请登陆',
defaultType:'textfield',
monitorValid:true,
items:[{
fieldLabel:'用户名',
name:'username',
allowBlank:false
},{
fieldLabel:'密码',
name:'password',
inputType:'password',
allowBlank:false
}],
buttons:[{
text:'登陆',
formBind: true,
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'连接中...',
waitMsg:'发送数据...',
success:function(){
Ext.Msg.alert('状态', '登陆成功!', function(btn, text){
if (btn == 'ok'){
var redirect = 'user_check.action';
window.location = redirect;
win.destroy();
}
});
},
failure:function(form, action){
Ext.Msg.alert('状态','登陆失败,请重试!');
login.getForm().reset();
}
});
}
},{
text: '取消',
handler:function(){
win.destroy();
}//重置表单
}]
});
var win = new Ext.Window({
layout:'fit',
width:300,
height:150,
closable: true,
resizable: false,
plain: true,
border: false,
modal:true,
items: [login]
});
win.show();
});
看一个Ext js实现的实例
学习Ext js的经验
1.多看Ext js包下的示例
2.多调试
3.多抄些例子