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滑动门代码
Dec 19 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
jqgrid 简单学习笔记
May 03 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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中的Class的几点个人看法
2006/10/09 PHP
计数器详细设计
2006/10/09 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
追悼会上的答谢词
2014/01/10 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
减负增效提质方案
2014/05/23 职场文书
党小组推荐意见
2015/06/02 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏