ExtJS是基于JavaScript的一个用户界面框架,它用于开发富互联网应用(Rich Internet Applications,RIA)界面。这个框架最初由Jack Slocum编写,后来被YAHOO收购,并且逐渐发展壮大,成为了一种流行的前端开发技术。它支持复杂的布局,交互式数据可视化和强大的组件,这些组件包括网格、树、窗口、面板、菜单、表单控件等等。
ExtJS使用遵循Lesser GNU General Public License(LGPL)的开源协议,这意味着在遵守协议的前提下可以免费使用。ExtJS可以与多种技术框架配合使用,比如jQuery、Prototype等。
ExtJS学习专题(一)详细介绍了如何开始使用ExtJS进行开发,并提供了一个简单的实例来帮助理解。以下是详细知识点:
1. 获取ExtJS库文件:
要开始使用ExtJS,第一步是获取库文件。可以通过访问官网提供的下载页面(***/products/gxt/download.php)下载ZIP压缩文件。下载后,解压到本地目录,例如【D:\ExtCode】。解压后,你将看到如下结构的文件夹和文件:
- adapter:包含第三方底层库适配器,例如ext-base.js,它将第三方库映射为ExtJS支持的库。
- build:存放压缩后的ExtJS全部源码文件,源码按照类别存放。
- docs:提供了API帮助文档。
- examples:包含了使用ExtJS技术实现的小示例。
- resources:包含ExtJS UI资源文件,如CSS样式表和图片文件等。
- source:存放未压缩的ExtJS源码文件。
- Ext-all.js:压缩后的全部ExtJS源码文件。
- ext-all-debug.js:未压缩的全部ExtJS源码文件,用于开发和调试。
- ext-core.js:压缩后的ExtJS核心组件文件。
- ext-core-debug.js:未压缩的ExtJS核心组件文件。
2. 在页面中引入ExtJS:
引入ExtJS到HTML页面中非常简单。首先需要引入CSS样式表和JavaScript文件。样式表文件为resources/css/ext-all.css。JavaScript文件包括基础库文件adapter/ext/ext-base.js和核心库文件ext-all.js。示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<link rel="stylesheet" type="text/css" href="路径/resources/css/ext-all.css"/>
<script type="text/javascript" src="路径/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="路径/ext-all.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
```
3. 使用Ext.onReady:
ExtJS提供了Ext.onReady函数来确保在页面加载完毕后执行代码。这个函数可以接受一个函数作为参数,也可以使用匿名函数。示例如下:
```javascript
Ext.onReady(function() {
alert('ExtJS库已加载!');
});
```
4. 创建ExtJS应用实例:
ExtJS允许你快速创建窗口和视图。下面是一个创建窗口的示例:
```javascript
Ext.onReady(function(){
var win = new Ext.Window({
title: "hello",
width: 300,
height: 200,
html: 'Hello,easyjfopensource'
});
win.show();
});
```
在页面中使用上述JavaScript代码后,页面上会显示一个标题为"hello",大小为300*200像素,并且内容为"Hello,easyjfopensource"的窗口。
5. 对于***开发者:
如果是***开发者,需要将ExtJS框架嵌入到ASPX页面中。代码示例如下:
```asp
<%@Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtJSAppTest.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "***">
<html xmlns="***">
<head runat="server">
<title>ExtJSWorld</title>
<link rel="stylesheet" type="text/css" href="路径/resources/css/ext-all.css"/>
<script type="text/javascript" src="路径/ext-all.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
```
通过以上步骤,可以快速地在个人项目或企业级项目中部署ExtJS,并构建起具有专业外观和复杂用户交互的前端界面。随着学习的深入,开发者可以进一步探索ExtJS提供的丰富组件和高级功能,如数据绑定、表单验证、动画效果等,从而实现更为复杂的应用开发。