轻松学习EXTJS

### 轻松学习EXT JS：初学者指南 #### 一、引言 EXT JS是一款功能强大且灵活的JavaScript框架，被广泛应用于构建复杂的Web应用程序。对于初学者来说，掌握EXT JS的基础知识是非常重要的第一步。本文将从EXT JS的安装、文档阅读、常见问题解决等方面入手，帮助初学者更好地理解并运用EXT JS。 #### 二、获取EXT JS - **官方下载**：你需要访问EXT JS官方网站（http://www.extjs.com/download）下载EXT JS发布包。该包通常包含源代码、API文档和示例代码，非常适合初学者了解和学习EXT JS的基本功能。 - **版本选择**：截至本文撰写时，你可以选择下载`ext-1.1.1`或`ext-2.0`版本。尽管`ext-2.0`的版本更高，但由于发布时间较新，可能存在未知问题。因此，建议初学者从`ext-1.1.1`开始学习。 #### 三、文档阅读 - **EXT-1.1.1文档**： - **API文档**：`docs`目录下的API文档涵盖了几乎所有函数、配置和事件的说明。通过直接打开`index.html`文件即可查看。此外，文档还包含了对`examples`目录下示例的引用。 - **注意事项**：某些示例依赖于JSON数据交换或其他后端服务，因此需要部署在服务器上才能正常运行。若示例使用PHP编写，则还需配置PHP运行环境。对于Java开发者而言，安装Resin-3是一种较为便捷的选择，因为它支持PHP运行。 - **EXT-2.0文档**： - **API文档**：同样位于`docs`目录下，但与1.1.1版本不同，2.0的文档依赖于Ajax加载内容，这意味着你必须将其部署到服务器上并通过浏览器访问才能查看完整文档。 #### 四、解决常见问题 - **为什么有些示例必须部署在服务器上？** - 这是因为这些示例利用Ajax从后端获取数据。若不在服务器环境下运行，Ajax请求将会失败，导致无法正确展示结果。 - **解决方案**：可以尝试使用`localXHR`技术，使Ajax能够从本地文件系统获取数据，从而避免服务器依赖。 - **为什么自定义代码中图片显示失败？** - EXT JS默认使用一个空白图片作为占位符，并通过CSS配置背景图片实现动态换肤。如果图片路径配置错误或网络请求失败，就会出现图片无法显示的情况。 - **解决方案**：参照`examples.js`中的配置，修改`Ext.BLANK_IMAGE_URL`为正确的本地路径，例如：`'../../resources/images/default/s.gif'`。 #### 五、开发工具推荐 - **Firefox + Firebug**：鉴于EXT JS开发者的偏好以及Firebug在调试JavaScript方面的强大功能，强烈推荐使用Firefox搭配Firebug进行开发。 - **Firebug特点**： - 显示动态生成的DOM元素； - 允许直接修改DOM并在显示中立即反映； - 提供强大的控制台功能，如执行JavaScript脚本、配置日志级别等； - 监控Ajax请求及响应数据，便于调试网络通信。 #### 六、入门实践：Hello World示例 为了帮助初学者快速上手，我们将通过两个简单的Hello World示例进行讲解： 1. **直接使用官方发布包**： - 下载EXT JS官方发布的ZIP文件； - 解压至任意目录； - 确认目录结构符合预期。 接下来，我们将逐步引导读者完成示例代码的编写和调试过程，具体步骤将在后续章节详细介绍。 --- 通过本文的学习，相信初学者已经掌握了EXT JS的基本获取方式、文档查阅技巧以及解决常见问题的方法。希望本文能够成为您轻松学习EXT JS旅程的良好起点。