ExtJs4下拉树选择框 ComboTree 实现与代码详解

在ExtJs4中，下拉树选择框（ComboTree）是一种强大的组件，用于提供用户在列表中进行树状结构选择的功能。本文档主要介绍了如何实现一个定制化的下拉树选择框，它扩展自Ext.form.field.Picker，并具备多种配置选项以适应不同的应用场景。 首先，定义了一个名为`Slk.view.ui.ComboTree`的视图组件，它继承自`Ext.form.field.Picker`，并设置了以下关键属性： 1. `rootText`：默认显示在树根节点的文本，如果没有提供则默认为"root"。 2. `rootId`：树根节点的唯一标识，默认为"0"。 3. `rootVisible`：是否在初始化时显示根节点，默认为`false`。 4. `nodeParam`：节点数据请求时用于识别节点的参数，默认为"id"。 5. `treeUrl`：当用户点击树中的节点加号时，将发送请求的URL，返回JSON格式的节点数据。 6. `multiSelect`：是否支持多选，默认为`false`，即单选模式。 7. `fieldName`：字段名，用于标识隐藏域的名称。 8. `useId`：是否使用id域存储节点的标识，默认为`true`，会创建一个隐藏域来存储id值，以便于表单提交时使用。 9. `selectedIds`、`values`和`texts`：分别存储选中的节点id、文本值和整个树的文本集合。 10. `leafOnly`：仅允许选择叶子节点，即非分支节点，默认为`true`。 11. `hiddenField`：一个隐藏的`Ext.form.field.Hidden`实例，用于存储实际的id值。 12. `resetValues`：重置组件状态的方法，清空所有选中的值。 在组件的初始化过程中，如果`useId`被设置，会创建一个隐藏域`self.hiddenField`，用于存储节点的id值，而不是Picker组件显示的文本值。这样设计的好处是，当表单提交时，可以直接使用这些隐藏域的id值，而不是依赖于Picker组件的显示文本，提高了数据的准确性和一致性。 通过调用`Ext.apply`方法，设置了picker的对齐方式（`pickerAlign`）和名称，然后调用父类的`initComponent`方法完成组件的初始化过程。 这篇文档提供了ExtJs4下拉树选择框（ComboTree）的实现细节，包括组件的配置项和初始化流程，适用于需要在表格或表单中集成树形选择功能的应用场景。开发者可以根据需求调整这些配置，实现单选或多选功能，并利用隐藏域来管理节点的标识信息。