ExtJs树形结构封装详解与使用

"这篇文档是关于ExtJs树形结构封装的使用说明，主要涉及Js类、方法、事件响应以及在组织机构展示中的应用。适用于理解并实现基于ExtJs的树形菜单，尤其对于Java和JavaScript开发者有用。" 在ExtJs中，树形结构常用于展示层次化的数据，如组织机构、文件系统等。以下是对标题和描述中知识点的详细说明： 1. **Js类**： - `createtree` 是一个自定义的Js类，用于封装ExtJs的树形结构。通过调用`new createtree()`来创建一个新的树实例。 2. **引用路径**： - 引入`orgTree.js`文件，这个文件包含了封装树形结构的相关代码。确保正确设置路径，以便在页面中使用。 3. **构造方法与使用实例**： - 调用`new createtree()`创建实例，并通过一系列方法设置树的属性，如Json数据、标题、容器ID、宽度和高度，最后调用`render()`方法来渲染树。 4. **方法说明**： - `setTreeJson(str)`：设置树的数据源，str是Json格式的字符串。 - `getElementById(id)`：根据ID获取特定的树节点。 - `setSingleClick(flag)`：设置是否单击节点就展开，flag为布尔值。 - `setExpanded(flag)`：设置树是否自动展开，flag同样为布尔值。 - `setTitle(title)`：设置树的标题文本。 - `setElId(id)`：设置包含树的容器元素的ID。 - `setWidth(width)`：设置树的宽度。 - `setHeight(height)`：设置树的高度。 - `getRootNode()`：返回树的根节点。 - `isRootView(flag)`：设置是否显示根节点，flag为布尔值。 - `setInitCheckedSelector(selector)`：设置初始化时选中节点的筛选条件。 - `addNodesFilter(func)`：添加节点数组过滤器，可以用于对节点数据进行处理。 - `getChecked()`：获取当前选中的节点，返回一个自定义类型的数组。 - `clear()`：清除所有选中的节点。 5. **事件响应**： - `checkchange` 事件：当节点被选中或取消选中时触发，可以通过`addEventFunc('checkchange', func)`来添加响应函数。 - 事件响应函数参数包括`node`(被操作的节点对象)，`checked`(当前节点的选中状态)，以及`mytree`(树实例本身)，这些参数可以在事件处理函数中使用，以执行相应的业务逻辑。 6. **实际应用**： - 在组织机构展示中，树形结构可以帮助用户直观地浏览和操作层次结构，例如员工部门关系，可以通过树形菜单进行查找、选择和管理。 通过以上方法，开发者可以自定义树形结构的行为，如设置初始状态、响应用户交互、处理节点数据等，从而实现丰富的功能。在实际项目中，还可以结合后台服务（如Java服务）动态加载数据，以提供更灵活的用户体验。