ExtJS4 MVC模式开发员工管理系统笔记

"这篇开发笔记详细记录了作者在学习和使用Extjs4开发员工管理系统时的心得体会和技巧，包括从准备工作到框架搭建的过程。作者在笔记中提到了采用MVC模式进行开发的决定，以及系统的主要组成部分和目录结构。" 在深入探讨Extjs4的知识点之前，首先理解一下Extjs4是什么。Extjs是一个用于构建富客户端Web应用的JavaScript库，它提供了丰富的用户界面组件和强大的数据管理模型。在Extjs4中，引入了更完善的MVC（Model-View-Controller）架构，使得大型应用的组织和管理更为有序。 在笔记的第一部分，作者提到准备工作中涉及到的数据环境，包括Data文件夹下的数据库文件，如Menu、user和userinfo表，用于存储管理系统的核心数据。此外，还设置了Images目录用于存放图片资源，Include目录存放服务端的ASP文件，App目录则是整个应用的JavaScript代码组织地，包含controller和view两个子目录，分别对应MVC模式中的控制器和视图。Extjs4库文件自然存放于对应的目录下，而Server目录则用于放置处理服务端数据交互的ASP文件。 笔记的第二部分介绍了框架搭建，作者强调了头部、菜单、内容区和底部四个主要部分的分离，并通过Extjs4的动态加载功能来加载这些独立的JS文件。动态加载是Extjs4的一个重要特性，它允许应用按需加载资源，提高页面加载效率，同时降低了初始页面的大小。 在使用Extjs4进行MVC开发时，以下是一些关键知识点： 1. **MVC模式**：Model代表数据模型，负责数据的存储和操作；View是用户界面，显示数据；Controller作为两者之间的桥梁，处理用户交互并协调Model和View的更新。 2. **目录结构**：在Extjs4的MVC应用中，通常会根据MVC原则组织文件，如将控制器文件放在controller目录，视图文件放在view目录，这样便于管理和维护。 3. **组件化**：Extjs4提供了丰富的UI组件，如窗口、表格、表单等，开发者可以组合这些组件创建复杂的用户界面。 4. **动态加载**：使用`Ext.Loader`类可以实现动态加载所需的类文件，这样可以在运行时按需加载特定的模块，提高应用性能。 5. **数据绑定**：Extjs4支持双向数据绑定，允许视图和模型之间自动同步，减少了手动更新视图的代码。 6. **事件处理**：通过监听和触发事件，Controller可以响应View的变化，更新Model或者执行其他操作。 7. **Store和Model**：Store用于存储和管理数据，Model定义了数据字段和行为，两者结合实现了数据层的抽象。 8. **Ext.Application**：是Extjs4应用的入口点，用于配置应用的全局设置，如命名空间、路由、控制器等。 通过以上知识点的学习，开发者可以更好地理解和实践使用Extjs4进行MVC模式的Web应用开发。这篇开发笔记提供了一个实际的上下文，有助于读者深入理解这些概念在实际项目中的运用。