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 相关文章推荐
JS修改css样式style浅谈
May 06 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
理解javascript异步编程
2016/01/27 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
详解Python模块化编程与装饰器
2021/01/16 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
电气专业应届生求职信
2013/11/01 职场文书
工作交流会欢迎词
2014/01/12 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
大学军训感言300字
2014/03/09 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
管理失职检讨书范文
2015/05/05 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python