温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ExtJS2.0开发与实践笔记[0]——初识ExtJS

发布时间:2020-04-01 20:18:06 来源:网络 阅读:908 作者:cping 栏目:web开发
ExtJS2.0开发与实践笔记[0]——初识ExtJS
简短的前言:
随着网络技术的发展,良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标,并扮演非常重要的一环。基于Ajax应用思想的盛行,prototypeextdojoyuimootools等越来越多的第三方开源Javascript Library开始涌现,虽然这极大地增加了我们对web应用的扩展可能性,但同时也或多或少的增加了我们的学习难度。
为此,我准备在blog中逐步整理学习心得,已备查找需要及看客指正。
什么是ExtJS?
按照Ext开发团队的说法,ExtJS从应用角度上讲是一个用户界面库,而不是一个JavaScript Library。原本作为Yahoo! UI Library(也就是YUI)的扩展而被开发出来,但从1.1版本开始由于支持者的增多,已经得到了必要的扩充,不再依赖于YUIExtJS可以与prototype.jsjquery等成熟的js库一起使用,也可以作为单独的应用部署到开发中去,Adobe AIRiPhone开发工具都提供了对Ext的支持。
就我个人的观点而言,在业务处理上讲ExtJS2.0已非常完备,足以满足绝大多数web表示层应用的需求;但是对于解释执行的javascript来讲性能损耗问题却始终无法避免,因此个人不建议在要求响应速度的项目中使用ExtJS进行开发。
ExtJS并不是一个完全免费的项目,他以普通开源版及企业版共存的方式发行,企业版收费标准如下图:
ExtJS2.0开发与实践笔记[0]——初识ExtJS
我们可以通过[url]http://extjs.com/download[/url]来获得最新版本的ext框架。
 
发展简史:
YUI-Ext
Yahoo! UI Library 的扩展。
Ext 1.0
Yahoo! UI Library 的扩展,同时也支持prototype.jsjquery等。
Ext 1.1
不再依赖「Yahoo! UI Library」,能够不依赖任何第三方组件而单独使用。
Ext 2.0
极大丰富界面库的一版,还在继续扩充中。
 
运行效果图:
ExtJS2.0开发与实践笔记[0]——初识ExtJS
 
 
如何开发ExtJS2.0应用?
针对ExtJS2.0,由于其通过浏览器解释执行,所以我们即可以使用记事本、EditPlusUltraEdit等方式直接编辑文本文件,也可以通过IDE进行调试开发。

目前Eclipse上已经有很多能够支持ExtJS2.0的插件,如
Spket等,此处不一一例举。本人在此仅以自己常用的Aptana IDE作为开发平台。
Aptana是一个专注于javascript的开源IDE环境,它提供了丰富的javascript开发及调试资源,本人从0.2版本开始试用,目前最新版本为1.1,我们可以通过[url]http://www.aptana.com/download[/url]获得其最新版本。
 
原始版本的Aptana1.1只支持Ext1.1版本,所幸Aptana论坛有人提供了第三方的升级插件,我们可以通过[url]http://support.aptana.com/asap/browse/STU-547[/url][url]http://orsox.mocis.at/download.php?list.1[/url]进行下载,直接copyAptanaplugins文件夹下重启Aptana即可运行。
 
此时我们可以通过Aptana[Window]项下[Preference]选项调整Aptana的设置选择支持Ext2.0
ExtJS2.0开发与实践笔记[0]——初识ExtJS
 
ExtJS2.0的“Hello World
 
Aptana中使用ExtJS2.0,我们至少需要ExtJS2.0中的如下文件:
 
Adapter文件夹
框架及外部资源适配器,我们需要其中ext文件夹下的ext-base.js文件控制ExtJS全局
Resources文件夹
一个文件夹,包含了css,p_w_picpathExt必须的资源
ext-all.js文件
一个压缩的单文件ExtJS文件集合
 
ExtJS2.0开发与实践笔记[0]——初识ExtJS
实际如下图:
ExtJS2.0开发与实践笔记[0]——初识ExtJS
 
首先,我们在helloworld.js中建立如下内容
ExtJS2.0开发与实践笔记[0]——初识ExtJSExtJS2.0开发与实践笔记[0]——初识ExtJS/**//**
ExtJS2.0开发与实践笔记[0]——初识ExtJS * 通过Ext输出Hello World,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用
ExtJS2.0开发与实践笔记[0]——初识ExtJS * Ext.onReady]
ExtJS2.0开发与实践笔记[0]——初识ExtJS * 
ExtJS2.0开发与实践笔记[0]——初识ExtJS * @param {Object} ''
ExtJS2.0开发与实践笔记[0]——初识ExtJS * @param {Object} 'Hello World!'
ExtJS2.0开发与实践笔记[0]——初识ExtJS 
*/

ExtJS2.0开发与实践笔记[0]——初识ExtJSExtJS2.0开发与实践笔记[0]——初识ExtJSExt.onReady(
function() ...{
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
//以Ext的alert打印'Hello World!'
ExtJS2.0开发与实践笔记[0]——初识ExtJS
    Ext.MessageBox.alert('','Hello World!');
ExtJS2.0开发与实践笔记[0]——初识ExtJS}
);

而后,我们建立helloworld.html文件,内容如下
ExtJS2.0开发与实践笔记[0]——初识ExtJS<html>
ExtJS2.0开发与实践笔记[0]——初识ExtJS
<head>
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<title>HelloExt</title>
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<!--ExtJS资源加载-->
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<script type="text/javascript" src="ext-all.js"></script>
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<!--我的js文件-->
ExtJS2.0开发与实践笔记[0]——初识ExtJS    
<script type="text/javascript" src="helloworld.js"></script>
ExtJS2.0开发与实践笔记[0]——初识ExtJS
</head>
ExtJS2.0开发与实践笔记[0]——初识ExtJS
<body>
ExtJS2.0开发与实践笔记[0]——初识ExtJS    "ExtJS的Hello World测试"
ExtJS2.0开发与实践笔记[0]——初识ExtJS
</body>
ExtJS2.0开发与实践笔记[0]——初识ExtJS
</html>

Aptana中选择如下图,将自动调用您所选择的浏览器进行测试。
ExtJS2.0开发与实践笔记[0]——初识ExtJS
 
输出运行效果如下图:
ExtJS2.0开发与实践笔记[0]——初识ExtJS
 
怎么样,超级简单,是人就会吧?下一回,我将针对ExtJS的特性开始做深入讲解。
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI