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 相关文章推荐
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
Angular处理未可知异常错误的方法详解
Jan 17 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 事件机制(2)
2011/03/23 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Python 的 Socket 编程
2015/03/24 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python递归实现快速排序
2018/08/18 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python ftplib模块使用代码实例
2019/12/31 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
开学典礼主持词
2014/03/19 职场文书
运动会方阵口号
2014/06/07 职场文书
授权委托书
2014/07/31 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
Oracle笔记
2021/04/05 Oracle
nginx实现动静分离的方法示例
2021/11/07 Servers
Python 视频画质增强
2022/04/28 Python