自定义ExtJS下拉树组件实现与示例

"本文介绍了如何在ExtJS中自定义下拉树组件，提供了前端和后端的源代码示例，以及组件的基本配置和使用方法。" 在ExtJS开发中，有时我们需要自定义一些特殊的组件来满足特定的需求，比如下拉树（ComboBox Tree）。这种组件将下拉列表与树结构相结合，允许用户从层级结构中选择一个项。以下是如何创建一个自定义下拉树的步骤： 1. **效果图**：[图片] - 此处应展示了一个实际运行的下拉树组件，显示了树形结构的数据，并且可以进行选择。 2. **使用方式**： - **前台配置**：首先在前台（JavaScript）中，你需要定义一个具有特定xtype的组件，如`xtype:'mycomboxtree'`。配置包括`url`属性，用于指定获取数据的后台接口，`fieldLabel`设置标签文本，例如'报销单位'，`treeRootText`定义根节点的文本，如'所有单位'，还有其他可选参数，如`rootVisible`控制根节点是否可见，`allowUnLeafClick`则决定是否允许点击非叶子节点并选中。 - **后台数据**：当用户打开下拉树时，后台需要返回JSON格式的数据，包含每个节点的文本和ID。示例代码展示了如何根据请求参数（如`fatherId`）查询数据库，然后构建JSON字符串响应给前端。JSON字符串的结构是键值对，其中`text`表示节点文本，`id`表示节点ID，`leaf`表示是否为叶子节点。 - **组件原件**：自定义的`ComboboxTree`扩展了Ext.form.ComboBox，需要设置`id`、`url`、`fieldLabel`等属性。`store`是数据存储，这里使用了`SimpleStore`，字段和数据可以自定义。其他配置如`editable`、`autoScroll`、`mode`、`triggerAction`、`emptyText`和`width`等都是ExtJS组件的常见属性，可以根据需求调整。 3. **配置选项**： - `treeRootText`：设置下拉树的根节点显示文本。 - `rootVisible`：如果设为`false`，则不显示根节点，只显示子节点。 - `allowUnLeafClick`：默认情况下，只有叶子节点可以被选中。如果设为`true`，非叶子节点也可以被选中。 - `store`：用于存储下拉树的数据，可以是简单的数组或更复杂的`JsonStore`，在这里使用`SimpleStore`简化了数据结构。 - `editable`：如果设为`false`，则下拉框不可编辑，用户只能从下拉列表中选择。 - `autoScroll`：如果设为`false`，则禁用自动滚动。 - `mode`：设置下拉框的行为模式，`'local'`表示数据本地化，即数据在前端。 - `triggerAction`：设置触发下拉列表显示的方式，`'all'`表示显示完整列表。 - `emptyText`：当没有选中任何项时显示的提示文本。 - `width`：下拉框的宽度。 - `tpl`：模板定义了下拉树的HTML结构，这里使用`<div id='tree'></div>`创建了一个空的`div`来承载树结构。 - `onSelect`：当选中项改变时的回调函数，这里使用了空函数`Ext.emptyFn`，可根据需求自定义。 通过上述配置，你可以创建一个功能完备的自定义下拉树组件，实现从层次结构中选择数据的功能。这在处理如组织结构、地区分类等需要层级选择的场景中非常有用。记得根据实际项目需求调整代码，如接口URL、数据格式等。