ExtJS4.0 学习手册：环境搭建与 HelloWorld 示例

"这篇资源是关于Extjs4.0的中文学习手册，旨在帮助初学者入门和理解Extjs4的核心概念。它包含了搭建学习环境的步骤、布局详解、MVC应用模式以及如何阅读Extjs4的文档。" 在深入探讨Extjs4.0之前，我们先了解一些基础信息。Extjs是一个用于构建富客户端Web应用的JavaScript框架，它提供了丰富的组件库和强大的数据绑定机制。Extjs4.0是该框架的一个重要版本，引入了许多新特性和改进，包括更强大的MVC架构、全新的布局管理器和改进的性能。 1. **搭建学习环境**： - 首先，你需要获取Extjs4.0的发布包，这通常可以从官方网站或者像http://extjs.org.cn/这样的第三方站点下载。 - 安装集成开发环境（如MyEclipse）和服务器（如Tomcat）是必要的，因为它们提供了开发和运行Web应用程序的平台。 - 在MyEclipse中创建一个新的Web项目，并将Extjs4.0.7的解压文件放入Webroot目录下。确保Examples目录也被包含，它包含了许多示例程序。 - 配置并启动Tomcat服务器，通过访问`http://localhost:8080/Ext4/index.html`来检查环境是否配置正确。如果一切正常，你应该能看到Extjs的欢迎界面。 - 另外，通过`http://localhost:8080/Ext4/docs/index.html`和`http://localhost:8080/Ext4/examples/index.html`可以访问API文档和示例页面，这些都是学习过程中非常有用的参考资料。 2. **Extjs4 布局详解**： - Extjs4的布局管理器是其核心功能之一，它允许开发者定义组件如何在容器中排列和适应不同的屏幕尺寸。例如，`fit`布局会在容器中完全填充单个组件，而`border`布局则按照预定义的区域划分空间。 - 学习布局管理器对于创建响应式和动态界面至关重要，因为这直接影响到用户界面的交互性和用户体验。 3. **MVC 应用模式**： - MVC（Model-View-Controller）是Extjs4中的主要设计模式，它将应用分为三个部分：模型（Model）处理数据和业务逻辑，视图（View）负责显示数据，控制器（Controller）协调模型和视图的交互。 - 在实际编程中，`Ext.application`方法是创建MVC应用的起点，它包含了应用的名称和启动函数。在这个例子中，`Ext.container.Viewport`被用作主容器，它的`layout`属性定义了布局方式，`items`属性则包含了显示在界面上的组件。 4. **编写基本的Extjs程序**： - 创建`HelloExt.js`文件，定义了一个简单的应用程序，其中包含了`Ext.application`方法，指定了应用名称和启动函数。 - 同时创建`HelloExt.html`文件，引入必要的CSS和JavaScript文件，并加载`HelloExt.js`。这样，当你访问HTML页面时，JavaScript代码就会执行，呈现一个带有标题"HelloExt"和欢迎信息的窗口。 这篇中文学习手册为初学者提供了一条学习Extjs4的清晰路径，从环境配置到编写第一个程序，再到深入理解MVC架构和布局管理，都是逐步展开的。通过实践这些内容，你可以逐步掌握这个强大的前端框架，为构建复杂的Web应用程序打下坚实的基础。