ExtJS4入门教程：构建‘Hello Ext’程序

需积分: 10 10 浏览量更新于2024-09-11 收藏 265KB PDF 举报

"ext4.0入门教程 - 一个适合初学者的ExtJS框架学习指南" 在本文中，我们将深入探讨如何开始使用ExtJS 4，一个强大的JavaScript前端框架，特别适用于构建复杂的桌面级Web应用程序。ExtJS 4提供了一套完整的组件模型、数据绑定和布局管理，使得开发者能够构建出具有高度交互性和美观界面的应用。首先，让我们来看看入门所需的基本条件： 1. **浏览器支持**：ExtJS 4兼容所有主流浏览器，包括Chrome、Safari和Firefox的最新版本。为了方便调试，建议使用这些浏览器。 2. **本地服务器环境**：作为一名Web开发人员，设置一个本地服务器环境是必备技能。可以安装Apache服务器，并将项目部署在本地服务器上。 3. **ExtJS 4 SDK**：访问官方网站下载最新版本的ExtJS SDK，并将其解压缩到你的Web服务器根目录。解压后，确保可以通过http://localhost/extjs/index.html访问到欢迎页面。接下来，我们关注程序的架构： 2.1 **目录结构**：推荐采用以下结构组织你的项目： - `appName`：包含所有程序代码，作为根目录。 - `app`：存放所有类，按命名空间规则创建子目录。 - `extjs`：放置ExtJS 4 SDK。 - `resources`：存储CSS和图片等资源文件。 - `app.js`：程序入口点。 - `index.html`：入口文件。在开始编写代码之前，先创建一个简单的"Hello Ext"程序。在Web服务器根目录下创建一个名为`helloext`的目录，然后放入`app.js`和`index.html`两个文件。将ExtJS SDK解压到`helloext`目录并重命名为`extjs`。在`index.html`中，引入必要的CSS和JavaScript文件，如下所示： ```html <html> <head> <title>HelloExt</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <script type="text/javascript" src="extjs/ext-debug.js"></script> <script type="text/javascript"> // 在这里编写你的JavaScript代码 </script> </head> <body> </body> </html> ``` 现在，你已经准备好开始编写你的第一个ExtJS程序。在JavaScript部分，你可以创建一个基本的窗口组件显示"Hello Ext"： ```javascript Ext.onReady(function() { var win = new Ext.Window({ title: 'Hello Ext', width: 300, height: 200, html: '你好，Ext!', renderTo: document.body }); win.show(); }); ``` 这段代码会在页面加载完成后创建一个窗口，并显示文本"你好，Ext!"。`Ext.onReady`函数确保在DOM完全加载后执行代码，`new Ext.Window`创建了一个新的窗口实例，设置了标题、大小、内容以及渲染位置。随着你对ExtJS 4的深入学习，你会逐渐掌握如何利用其组件系统、数据模型、布局管理器以及丰富的API来构建功能丰富的Web应用。不要忘记查看官方文档、示例和社区资源，它们将是你学习过程中宝贵的参考资料。

ExtJS 4 入门

本文地址 http://www.showframework.com/2012/06/extjs-4-getting-started/

本文PDF下载

1. 需求

1.1 浏览器

ExtJS 4支持所有主流浏览器，这个就不用说了如果需要调试，推荐使用下的浏览器

Chrome

Safari

Firefox

以上都请用最新版吧

1.2 服务器

作为Web开发工程师，如果你不会弄个server说明你不合格，所以还是搭建个本地Apache吧，

就不多说了

1.3 ExtJS 4 SDK

去官网下载最新版的压缩包，解压缩到你的web服务器根目录(作为web开发工程师你自己应该

找到这个目录)，如果解压出来的目录不是extjs，你可以重命名为extjs，然后访

问http://localhost/extjs/index.html看到欢迎页面就对了

2. 程序架构

2.1 目录结构

推荐下面这种目录结构(非强制，如果你足够懂和自信)

下载后可阅读完整内容，剩余4页未读，立即下载

chenzhoulv

粉丝: 0

ExtJS4入门教程：构建‘Hello Ext’程序

EXT4.0新手指南：搭建与实例入门

ExtJS4.0入门教程：从环境搭建到HelloWorld

EXT4.0学习笔记：Array Grid入门

Ext4.0教程

ExtJS4.0入门教程：中文学习手册

ExtJS 4.0入门教程：打造前端用户界面

ExtJS4.0入门教程：自动布局与组件解析

MyEclipse配置：ExtJS 4.0入门教程及组件详解

ExtJS4.0入门教程：环境搭建与HelloWorld示例

ExtJS4.0入门教程：搭建学习环境与HelloWorld

最新资源