Ext页面添加用户：自定义JS实现详细教程

本篇文档详细介绍了如何在Ext JS框架中增加用户添加功能，以一个实际场景为例，涉及到Ext组件的运用、数据交互以及Store对象的创建。以下是关键知识点的详细解读： 1. **Ext数据操作**: Ext是一个广泛使用的JavaScript库，用于构建富客户端应用程序。文档首先提到的`Ext.data.Store`是数据存储的核心对象，它负责管理和加载数据。`UserInfoStore`, `DepartStore`, 和 `ModelStore` 分别用于存储用户信息、部门数据和角色模型数据。通过`HttpProxy`和`JsonReader`配置，这些Store实例从服务器端获取JSON格式的数据。 2. **数据加载**: 在初始化时，通过`.load()`方法向服务器发送请求，填充Store中的数据。例如，`DepartStore.load();`和`ModelStore.load();`分别加载部门和角色模型数据。 3. **ComboBox组件**: `Ext.form.ComboBox`是一个下拉选择框，用于用户选择部门。它配置了`store`属性指向`DepartStore`，`displayField`用于显示选择项的名称，`valueField`则用于存储选中的值。 4. **表单字段定义**: 为了构建用户添加表单，定义了字段数组`Fields`，包括`role_id`（整型）和`role_typename`两个字段，用于存储角色ID和类型名称。这些字段将被传递给`JsonReader`来解析服务器返回的数据。 5. **用户添加事件处理**: 文档中提到的`UserAdd`函数是一个事件处理器，可能是某个按钮的点击事件。当点击添加按钮时，这个函数会被调用，用户可以在其中创建用户添加表单，包括部门选择器和角色选择器，然后执行添加操作。 6. **自定义组件样式**: 通过`itemCls`属性，可以设置下拉框等组件的CSS类，如`form_row`，以定制样式。 这篇文档提供了在Ext JS中创建一个带有用户添加功能的表单的具体步骤，展示了如何利用Ext提供的数据管理工具和组件来实现前后端数据交互，对于开发Ext应用开发者来说是一份宝贵的参考资料。