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文件的小脚本
Jun 28 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
Angular 路由route实例代码
Jul 12 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
JS中this的4种绑定规则详解
Feb 04 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
客户端静态页面玩分页
2006/06/26 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
js变量提升深入理解
2016/09/16 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
django中瀑布流写法实例代码
2019/10/14 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
小孩百日宴答谢词
2014/01/15 职场文书
业务员简历自我评价
2014/03/06 职场文书
先进班组事迹材料
2014/12/25 职场文书
水电工程师岗位职责
2015/02/13 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Vue3.0 手写放大镜效果
2021/07/25 Vue.js