ExtJS 学习专题(一) 如何应用ExtJS(附实例)


Posted in Javascript onMarch 11, 2010

要使用ExtJS,先要得到ExtJS库文件,ExtJS库文件可以到ExtJS官网下载,地址是www.extjs.com/products/gxt/download.php,把下载得到的ZIP压缩文件解压缩到【D:\ExtCode】目录下,可以得到以下内容。

 

adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。
 

build:  压缩后的ext全部源码(里面分类存放)。
 

docs:  API帮助文档。
 

exmaples:提供使用ExtJs技术做出的小实例。
 

resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。
 

source: 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的协议。
 

Ext-all.js:压缩后的Ext全部源码。
 

ext-all-debug.js:无压缩的Ext全部的源码(用于调试)。

ext-core.js:压缩后的Ext的核心组件,包括sources/core下的所有类。

ext-core-debug.js:无压缩Ext的核心组件,包括sources/core下的所有类。

得到ExtJS库文件后,就可以将extjs应用到页面当中了。应用extjs需要在页面中引入extjs的样式及extjs库文件,样式文件为resources/css/ext-all.css,extjs的js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基础库,ext-all.js是 extjs的核心库。adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js换成 adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype- adapter.js等。

因此,要使用ExtJS框架的页面中一般包括下面几句: 

ExtJS 学习专题(一) 如何应用ExtJS(附实例)

在ExtJS库文件及页面内容加载完后,ExtJS会执行Ext.onReady中指定的函数,因此可以用,一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的,使用ExtJS应用程序的代码大致如下:

ExtJS 学习专题(一) 如何应用ExtJS(附实例)

fn也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:

ExtJS 学习专题(一) 如何应用ExtJS(附实例)

怎么样,看了以上内容,是不是迫不及待的想动手试试了?别急,下面我们写一个最简单的ExtJS应用,在hello.html文件中输入下面的代码:

ExtJS 学习专题(一) 如何应用ExtJS(附实例)

看一下页面效果:

ExtJS 学习专题(一) 如何应用ExtJS(附实例)

进一步,我们可以在页面上显示一个窗口,代码如下:

ExtJS 学习专题(一) 如何应用ExtJS(附实例)

在浏览hello.html,即可得在屏幕上显示一个窗口,如图所示:

ExtJS 学习专题(一) 如何应用ExtJS(附实例)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtJSAppTest.Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>ExtJS World</title> 
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css"/> 
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ExtJS/ext-all.js"></script> 
<script> 
Ext.onReady(function () { 
//弹出警告对话框. 
//Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!"); 
//弹出Window窗体. 
var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' }); 
win.show(); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
</body> 
</html>

这只是一个简单的实例,要想做出复杂的功能还需要学习很多知识,在下一篇文章中将介绍ExtJS类库和组件介绍,希望大家继续关注我的博客!
Javascript 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
jquery 简单的进度条实现代码
Mar 11 #Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 #Javascript
Javascript 入门基础学习
Mar 10 #Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 #Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 #Javascript
js Date自定义函数 延迟脚本执行
Mar 10 #Javascript
js 蒙版进度条(结合图片)
Mar 10 #Javascript
You might like
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python编程之string相关操作实例详解
2017/07/22 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
百度软件工程师职位
2013/02/14 面试题
单位承诺书格式
2014/05/21 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Go使用协程交替打印字符
2021/04/29 Golang
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技