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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
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分页函数完整实例代码
2014/09/22 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
Javascript 数组排序详解
2014/10/22 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
python实现识别相似图片小结
2016/02/22 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python查看数据类型的方法
2019/10/12 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
使用Python函数进行模块化的实现
2019/11/15 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
给海归自荐信的建议
2013/12/13 职场文书
节电标语大全
2014/06/23 职场文书
三行辞职书范文
2015/02/26 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书