博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ExtJS2.0开发与实践笔记[0]——初识ExtJS
阅读量:6336 次
发布时间:2019-06-22

本文共 2521 字,大约阅读时间需要 8 分钟。

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

简短的前言:

随着网络技术的发展,良好的用户体验及丰富的客户端功能已成为
Web
程序所共同追逐的目标,并扮演非常重要的一环。基于
Ajax
应用思想的盛行,
prototype
ext
dojo
yui
mootools
等越来越多的第三方开源
Javascript Library
开始涌现,虽然这极大地增加了我们对
web
应用的扩展可能性,但同时也或多或少的增加了我们的学习难度。

为此,我准备在
blog
中逐步整理学习心得,已备查找需要及看客指正。

什么是
ExtJS?

按照
Ext
开发团队的说法,
ExtJS
从应用角度上讲是一个用户界面库,而不是一个
JavaScript Library
。原本作为
Yahoo! UI Library(
也就是
YUI)
的扩展而被开发出来,但从
1.1
版本开始由于支持者的增多,已经得到了必要的扩充,不再依赖于
YUI
ExtJS
可以与
prototype.js
jquery
等成熟的
js
库一起使用,也可以作为单独的应用部署到开发中去,
Adobe AIR
iPhone
开发工具都提供了对
Ext
的支持。

就我个人的观点而言,在业务处理上讲
ExtJS2.0
已非常完备,足以满足绝大多数
web
表示层应用的需求;但是对于解释执行的
javascript
来讲性能损耗问题却始终无法避免,因此个人不建议在要求响应速度的项目中使用
ExtJS
进行开发。

ExtJS
并不是一个完全免费的项目,他以普通开源版及企业版共存的方式发行,企业版收费标准如下图:

我们可以通过
来获得最新版本的
ext
框架。

 
发展简史:

YUI-Ext

Yahoo! UI Library
 
的扩展。

Ext 1.0

Yahoo! UI Library
 
的扩展,同时也支持
prototype.js
jquery
等。

Ext 1.1

不再依赖「
Yahoo! UI Library
」,能够不依赖任何第三方组件而单独使用。

Ext 2.0

极大丰富界面库的一版,还在继续扩充中。

 
运行效果图:

 
 
如何开发ExtJS2.0应用?

针对ExtJS2.0,由于其通过浏览器解释执行,所以我们即可以使用记事本、EditPlusUltraEdit等方式直接编辑文本文件,也可以通过IDE进行调试开发。



目前
Eclipse上已经有很多能够支持
ExtJS2.0的插件,如
Spket
等,此处不一一例举。本人在此仅以自己常用的
Aptana IDE
作为开发平台。

Aptana
是一个专注于
javascript
的开源
IDE
环境,它提供了丰富的
javascript
开发及调试资源,本人从
0.2
版本开始试用,目前最新版本为
1.1
,我们可以通过
获得其最新版本。

 

原始版本的
Aptana1.1
只支持
Ext1.1
版本,所幸
Aptana
论坛有人提供了第三方的升级插件,我们可以通过

进行下载,直接
copy
Aptana
plugins
文件夹下重启
Aptana
即可运行。

 

此时我们可以通过Aptana[Window]项下[Preference]选项调整Aptana的设置选择支持Ext2.0

 

ExtJS2.0
的“Hello World

 

Aptana中使用ExtJS2.0,我们至少需要ExtJS2.0中的如下文件:

 

Adapter
文件夹

框架及外部资源适配器,我们需要其中ext文件夹下的
ext-base.js
文件控制ExtJS全局

Resources
文件夹

一个文件夹,包含了css,imageExt必须的资源

ext-all.js
文件

一个压缩的单文件ExtJS文件集合

 

实际如下图:

 

首先,我们在helloworld.js中建立如下内容

/*
*
 * 通过Ext输出Hello World,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用
 * Ext.onReady]
 * 
 * @param {Object} ''
 * @param {Object} 'Hello World!'
 
*/
Ext.onReady(
function
() 
{
    
//
以Ext的alert打印'Hello World!'
    Ext.MessageBox.alert(
''
,
'
Hello World!
'
);
}
);

而后,我们建立helloworld.html文件,内容如下

<
html
>
<
head
>
    
<
meta 
http-equiv
="Content-Type"
 content
="text/html; charset=utf-8"
>
    
<
title
>
HelloExt
</
title
>
    
<!--
ExtJS资源加载
-->
    
<
link 
rel
="stylesheet"
 type
="text/css"
 href
="resources/css/ext-all.css"
 
/>
    
<
script 
type
="text/javascript"
 src
="adapter/ext/ext-base.js"
></
script
>
    
<
script 
type
="text/javascript"
 src
="ext-all.js"
></
script
>
    
<!--
我的js文件
-->
    
<
script 
type
="text/javascript"
 src
="helloworld.js"
></
script
>
</
head
>
<
body
>
    "ExtJS的Hello World测试"
</
body
>
</
html
>

Aptana
中选择如下图,将自动调用您所选择的浏览器进行测试。

 
输出运行效果如下图:

 
本文转自 cping 51CTO博客,原文链接:http://blog.51cto.com/cping1982/130272

转载地址:http://efooa.baihongyu.com/

你可能感兴趣的文章
redis 数据类型详解 以及 redis适用场景场合
查看>>
mysql服务器的主从配置
查看>>
巧用AJAX技术,通过updatePanel控件实现局部刷新
查看>>
20140420技术交流活动总结
查看>>
SaltStack配置salt-api
查看>>
各种情况下block的类型
查看>>
ThinkPHP 3.2.x 集成极光推送指北
查看>>
js作用域链
查看>>
java中如何选择Collection Class--java线程(第3版)
查看>>
为运维人员插上腾飞更远的翅膀!
查看>>
Word 2003中编辑标记与格式标记大讨论
查看>>
从国内向海外转移域名经验谈
查看>>
浅谈apache与tomact的整合
查看>>
SQL Server vNext CTP1 on Linux
查看>>
1-为 Lync Server 2010 准备 Active Directory 域服务
查看>>
NetBackup下ORACLE恢复测试方案实例解析
查看>>
【有奖征文】“失业”程序员的苦辣酸甜
查看>>
IE9是如何被FireFox4超越全球市场份额的?
查看>>
linux bunzip2命令
查看>>
敏捷个人:通过实践TOGAF来思考如何学习并应用新的方法?
查看>>