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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
Vue js with语句原理及用法解析
Sep 03 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
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python如何生成各种随机分布图
2018/08/27 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python 多维List创建的问题小结
2019/01/18 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python numpy存取文件的方式
2020/04/01 Python
通过自学python能找到工作吗
2020/06/21 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
override和overload的区别
2016/03/09 面试题
Linux的文件类型
2016/07/05 面试题
JAVA程序员面试题
2012/10/03 面试题
社会公德演讲稿
2014/05/20 职场文书
2014年师德承诺书
2014/05/23 职场文书
骨干教师事迹材料
2014/12/17 职场文书
研究生简历自我评
2015/03/11 职场文书
大学生团日活动总结
2015/05/06 职场文书
入党自传范文2015
2015/06/26 职场文书
环保建议书作文400字
2015/09/14 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android