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 keycode总结
Feb 04 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
Vue侦测相关api的实现方法
May 22 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
C# Assembly类访问程序集信息
2009/06/13 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript Split()方法
2015/12/18 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
jsTree使用记录实例
2016/12/01 Javascript
老生常谈js数据类型
2017/08/03 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python中count函数简单用法
2020/01/05 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
Java模拟试题
2014/11/10 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
英语自荐信常用语句
2013/12/13 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
安踏广告词改编版
2014/03/21 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
文明礼貌主题班会
2015/08/14 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python