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.多抄些例子
- 大小: 64.5 KB
- 大小: 74.3 KB
分享到:
相关推荐
ext_js 入门详解 让您轻松学会ext_js框架,开发绚烂的界面
ext js入门的ppt教程,教程中涉及ext js的环境搭建,ext js包的引入和配置。
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
ext入门教程 图文并茂。易懂,适合初学者
第2章介绍了ext js 4的获取、ext js库的配置与使用、语法、本地化,以及一个经典的入门示例;第3章详细讲解了调试的工具及技巧,这是本书的重要内容,希望所有web开发者都能掌握;第4章全面介绍了ext js的基础架构;...
博文链接:https://haiqing421.iteye.com/blog/963070
EXT_JS入门教程,适合初学者!属于入门级的,可以快速对Ext有个初步的了解。
ext js是一种用javascript编写的功能强大的ajax框架,可用于开发绚丽多彩的富客户端ajax应用。本书是ext js领域内的经典著作,由浅入深、循序渐进地对ext js各方面的知识进行了全面而系统的阐述。全书由一个可以引领...
ExtJs demo ExJS+Spring+Struts2, 有点点价值的学习资料
ext js是一种用javascript编写的功能强大的ajax框架,可用于开发绚丽多彩的富客户端ajax应用。本书是ext js领域内的经典著作,由浅入深、循序渐进地对ext js各方面的知识进行了全面而系统的阐述。全书由一个可以引领...
extjs很好的入门教程,专门为初学者量身打造,大神可跳过。
Ext JS in Action extjs入门的好书籍。
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
Ext.js 6 示例学习,内有一中文文档及一英文文档,供大家学习
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,...Ext是一个用javascript编写,与后台技术无关的前端ajax框架。因此,可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。 Ext最新版本是ext3.2