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 获取服务器控件值的代码
Mar 05 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
使用js显示当前时间示例
Mar 02 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
简单的分页代码js实现
May 17 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
js中this的用法实例分析
2015/01/10 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
详解JavaScript的变量
2019/04/04 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
django框架创建应用操作示例
2019/09/26 Python
Django权限控制的使用
2021/01/07 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
农救科工作职责
2013/11/27 职场文书
安全负责人任命书
2014/06/06 职场文书
学习保证书100字
2015/02/26 职场文书
大学生党课心得体会
2016/01/07 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers