ExtJS2.0开发与实践笔记[0]——初识ExtJS
来源:互联网 发布:java中的构造器 编辑:程序博客网 时间:2024/05/21 09:24
ExtJS2.0开发与实践笔记[0]——初识ExtJS
简短的前言:
随着网络技术的发展,良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标,并扮演非常重要的一环。基于Ajax应用思想的盛行,prototype、ext、dojo、yui、mootools等越来越多的第三方开源Javascript Library开始涌现,虽然这极大地增加了我们对web应用的扩展可能性,但同时也或多或少的增加了我们的学习难度。
为此,我准备在blog中逐步整理学习心得,已备查找需要及看客指正。
我们可以通过http://extjs.com/download来获得最新版本的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应用?
目前Eclipse上已经有很多能够支持ExtJS2.0的插件,如Spket等,此处不一一例举。本人在此仅以自己常用的Aptana IDE作为开发平台。
原始版本的Aptana1.1只支持Ext1.1版本,所幸Aptana论坛有人提供了第三方的升级插件,我们可以通过http://support.aptana.com/asap/browse/STU-547或
此时我们可以通过Aptana的[Window]项下[Preference]选项调整Aptana的设置选择支持Ext2.0。
ExtJS2.0的“Hello World”
在Aptana中使用ExtJS2.0,我们至少需要ExtJS2.0中的如下文件:
Adapter文件夹
框架及外部资源适配器,我们需要其中ext文件夹下的ext-base.js文件控制ExtJS全局。
Resources文件夹
一个文件夹,包含了css,image等Ext必须的资源
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文件,内容如下
<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中选择如下图,将自动调用您所选择的浏览器进行测试。
输出运行效果如下图:
怎么样,超级简单,是人就会吧?下一回,我将针对ExtJS的特性开始做深入讲解。
- ExtJS2.0开发与实践笔记[0]——初识ExtJS
- ExtJS2.0开发与实践笔记[0]——初识ExtJS
- ExtJS2.0开发与实践笔记[0]——初识ExtJS
- ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form
- ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form
- ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form
- ExtJS2.0开发与实践笔记[2]——Ext中的Layout
- ExtJS2.0开发与实践笔记[3]——Ext中的Menu
- ExtJS2.0开发与实践笔记[4]——Ext中的动画处理
- ExtJS2.0实用简明教程——ExtJS的组件
- ExtJS2.0实用简明教程——与服务器交互
- ExtJS书讯:《JavaScript凌厉开发——ExtJS 3详解与实践(第二版)》
- 《ExtJS2.0实用简明教程》之获得ExtJS
- 《ExtJS2.0实用简明教程》之应用ExtJS
- 《ExtJS2.0实用简明教程》之ExtJS版的Hello
- ExtJs2.0学习系列(15)--extjs换肤
- ExtJs2.0学习系列(15)--extjs换肤
- 《ExtJS2.0实用简明教程》之ExtJS简介
- WPF(Windows Presentation Foundation)图形系统
- 优秀的百万级数据分页存储过程代码
- 推荐一个微软知识库(Microsoft Knowledge Base)订阅
- DirectShow SDK笔记【关于DirectShow(1)】
- 手把手教你写Undo、Redo程序(续)
- ExtJS2.0开发与实践笔记[0]——初识ExtJS
- 手把手教你写Undo、Redo程序
- Windows平台安装Bugzilla(下)
- Windows平台安装Bugzilla(上)
- 保存ADO的记录集为XML文件
- 翻译—IvorHorton的Begining Visual C++ 2005 [第一章]
- 深入的理解嵌套类和内部类
- 工具栏ToolBar上的CComboBox响应回车
- 用GDI+转BMP为WMF、EXIF、EMF格式