Extjs4---combobox省市区三级联动+struts2

### Extjs4---combobox省市区三级联动+struts2 #### 一、技术背景与原理 本案例涉及的关键技术主要包括Extjs4框架中的`combobox`组件以及Struts2框架，通过这两种技术实现了省市区三级联动的效果。下面将详细介绍其中涉及到的核心知识点。 #### 二、Extjs4 combobox组件介绍 1. **基础概念**： - `combobox`（组合框）是Extjs框架中一种常用的UI控件，用于展示下拉列表供用户选择。 - 在本例中，combobox被用来实现省市区的选择功能，即用户选择省份后自动加载对应的城市列表，选择城市后再加载对应的区县列表。 2. **关键属性**： - `displayField`: 显示字段，用于显示在combobox中的文本。 - `valueField`: 值字段，通常为ID等唯一标识符。 - `store`: 数据源，通常为一个`Store`对象，用于存储数据。 - `triggerAction`: 触发动作，决定何时触发下拉列表的加载。 - `queryMode`: 查询模式，`local`表示本地查询，`remote`表示远程查询。 3. **事件监听**： - `select`：当用户选择了某个项时触发此事件。在这个例子中，我们利用这个事件来加载下一个级别的数据。 #### 三、Struts2框架的应用 1. **框架简介**： - Struts2是一个基于MVC设计模式的Java Web应用框架，它简化了Web应用程序的开发流程，提供了丰富的插件支持。 - 在本例中，Struts2主要负责处理来自Extjs的Ajax请求，并返回JSON格式的数据。 2. **关键组件**： - **Action类**：负责业务逻辑处理及数据模型的构建。 - **配置文件**：如`struts.xml`用于定义Action的映射关系等。 3. **数据交互**： - 当用户在前端选择省份或城市时，Extjs会发送Ajax请求到服务器端。 - 服务器端通过Struts2框架接收到请求后，调用相应的Action处理请求并返回数据。 - 返回的数据通常是JSON格式，便于Extjs解析并动态更新UI。 #### 四、具体实现细节 1. **模型定义**： - 为了方便管理和操作数据，这里定义了一个名为`model`的Model类，包含两个字段：`id`和`name`。 2. **数据存储**： - 每个级别的数据都存储在一个单独的`Store`对象中，这些`Store`对象通过Ajax方式加载数据。 - `storeSheng`、`storeShi`、`storeQu`分别代表省份、城市、区县的数据存储。 3. **数据加载**： - 省份数据在页面加载时自动加载。 - 城市和区县的数据则是在用户选择上一级别之后通过Ajax动态加载。 4. **UI展示**： - 通过`Ext.create('Ext.panel.Panel')`创建了一个面板容器，里面包含了三个`combobox`组件，分别用于显示省份、城市和区县的信息。 - 每个`combobox`都有其特定的属性设置，例如`displayField`、`valueField`等，以确保数据能够正确地显示出来。 5. **事件处理**： - 在选择省份时，通过`select`事件监听器加载对应的城市数据。 - 同理，在选择城市时，再加载对应的区县数据。 #### 五、总结 通过Extjs4的`combobox`组件结合Struts2框架，我们可以轻松地实现省市区三级联动的功能。这种技术不仅提高了用户体验，还简化了开发者的工作。对于需要频繁处理地理位置选择的Web应用来说，这是一种非常实用且高效的技术方案。