ExtJS4.x入门教程：搭建环境与HelloWorld
需积分: 9 57 浏览量
更新于2024-07-22
收藏 2.73MB DOC 举报
"extJS4.x中文API学习教程"
在JavaScript框架的世界中，ExtJS是一个备受推崇的选择，尤其在Ajax应用的开发中表现出色。ExtJS 4.x版本提供了丰富的组件库和强大的API，使得开发者能轻松创建功能丰富的、响应式的网页界面。本教程将引导你了解如何使用ExtJS 4.x进行前端开发。
首先，获取ExtJS 4.x的资源至关重要。你可以通过访问http://extjs.org.cn/来下载官方发布的包，这个网站还提供相关的支持和服务。下载后，你需要将解压的文件复制到你的Web项目目录下。
接下来，搭建学习环境。如果你的机器上已安装了MyEclipse和Tomcat，那么你可以创建一个新的Web工程，并将ExtJS 4.0.7的文件放入Webroot目录。注意，Examples目录包含了Ext官方提供的示例程序，其中可能包含PHP代码，如果遇到错误提示，可暂时忽略。
在启动Tomcat并部署Web项目后，通过浏览器访问http://localhost:8080/Ext4/index.html来测试环境是否正常。如果一切顺利，你会看到一个预设的界面，表示你的开发环境已经准备就绪。同时，你可以通过http://localhost:8080/Ext4/docs/index.html查看API文档，这对于深入理解和使用ExtJS的功能至关重要。
学习ExtJS 4.x，首先从编写简单的应用程序开始。例如，创建一个名为`helloworld.js`的文件，写入基本的应用结构，包括定义应用名称、启动函数以及创建一个全屏容器，容器内包含一个具有标题和HTML内容的组件。
```javascript
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
title: 'HelloExt',
html: 'Hello! Welcome to ExtJS.'
}]
});
}
});
```
同时，创建一个`helloworld.html`文件，引入必要的CSS和JavaScript文件，这样就能在浏览器中运行这个简单的ExtJS应用。
```html
<html>
<head>
<title>HelloExt</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的基本结构和组件。随着对API文档的深入研究，你可以学习到更多的组件类型（如表格、表单、树形视图等）、布局管理、数据绑定、事件处理等核心概念。此外，官方提供的示例页面http://localhost:8080/Ext4/examples/index.html是学习不同功能和组件实际用法的宝贵资源。
ExtJS 4.x以其强大的功能和完善的API为前端开发提供了强大支持。通过本教程，你将逐步掌握这个框架的基础，进而能够构建复杂的Web应用。不断探索、实践和查阅官方文档，是提升ExtJS技能的关键。
布局将使组件固定于父容器的某一个位置，使用 布局的子组件尺寸相对于容
器的尺寸，即父容器容器的大小发生变化时，使用 布局的组件会根据规定的规则重
新渲染位置和大小。
CA$ 布局没有任何的直接配置选项（继承的除外），然而在使用 CA$ 布
局时，其子组件都有一个 属性，用来配置此子组件在父容器中所处的位置。
属性为一组字符串，可以使用百分比或者是4数字来表示。配置字符串使用空格隔开，
例如
!JN6JN!，表示宽度为父容器的 JN，高度为父容器的 6JN
!4=46!，表示组件相对于父容器右边距为 =，相对于父容器的底部位 6
!46J6N!，混合模式，表示组件党对于如容器右边为 6J，高度为父容器的 6N
示例代码：
!"!#
$%$&
!?!#
J#
#
3C 布局3#
$!!#
L#
#
@D&#
(
!!#
!JN6JN"!#
!JN6JN!
,#
!!#
剩余63页未读，继续阅读
2009-05-21 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
2013-05-13 上传
2008-10-14 上传
2008-10-16 上传
cimor_0
- 粉丝: 6
- 资源: 16
我的内容管理
展开
最新资源
- 基于Python和Opencv的车牌识别系统实现
- 我的代码小部件库：统计、MySQL操作与树结构功能
- React初学者入门指南：快速构建并部署你的第一个应用
- Oddish:夜潜CSGO皮肤，智能爬虫技术解析
- 利用REST HaProxy实现haproxy.cfg配置的HTTP接口化
- LeetCode用例构造实践：CMake和GoogleTest的应用
- 快速搭建vulhub靶场：简化docker-compose与vulhub-master下载
- 天秤座术语表：glossariolibras项目安装与使用指南
- 从Vercel到Firebase的全栈Amazon克隆项目指南
- ANU PK大楼Studio 1的3D声效和Ambisonic技术体验
- C#实现的鼠标事件功能演示
- 掌握DP-10：LeetCode超级掉蛋与爆破气球
- C与SDL开发的游戏如何编译至WebAssembly平台
- CastorDOC开源应用程序：文档管理功能与Alfresco集成
- LeetCode用例构造与计算机科学基础：数据结构与设计模式
- 通过travis-nightly-builder实现自动化API与Rake任务构建
