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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
Vuex 入门教程
Jan 10 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
js实现简单扫雷
Nov 27 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流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python的argparse库使用详解
2018/10/09 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
会计专业应届生自荐信
2014/02/07 职场文书
主要负责人任命书
2014/06/06 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
Python自动化实战之接口请求的实现
2022/05/30 Python