extjs 总结

EXTJS 是一种基于 JavaScript 的前端框架，主要用于构建富客户端应用程序。它提供了一套完整的组件库，包括用于创建各种用户界面元素的类，如表格、窗口、菜单、表单等。在EXTJS中，TreePanel是用于展示树形数据结构的组件，广泛应用于组织层次结构信息，如文件系统、组织架构等。 **EXTJS TreePanel 知识点** 1. **配置项** - `root`: TreePanel 的根节点，通常是整个树的起点。 - `rootVisible`: 是否显示根节点，默认情况下，根节点是可见的。 - `useArrows`: 是否启用Vista样式的箭头图标，表示节点的展开和折叠状态，默认不启用。 - `lines`: 是否显示树节点之间的连线，默认显示。 - `loader`: 负责加载和解析树节点数据的对象，通常为 `Ext.tree.TreeLoader`。 - `selModel`: 选择模型，定义了用户如何选择树中的节点，默认是 `Ext.tree.DefaultSelectionModel`。 - `pathSeparator`: 分隔树节点路径的字符，默认为 "/"。 - `singleExpand`: 是否只能一次展开一个节点，如果设置为 true，则每次点击节点时，其他已展开的同级节点会被自动折叠。 - `requestMethod`: 进行数据请求时使用的HTTP方法，如POST或GET。 - `containerScroll`: 是否将TreePanel注册到滚动管理器中，以实现滚动时的平滑效果。 2. **主要方法** - `collapseAll()`: 收缩树中所有的节点。 - `expandAll()`: 展开所有的节点。 - `getRootNode()`: 获取树的根节点。 - `getNodeById(id)`: 通过节点ID查找并返回相应的节点对象。 - `expand([deep], [anim], [callback], [scope])`: 展开指定的节点，可选参数控制是否深度展开、是否动画效果以及回调函数。 - `expandPath(path, [attr], [callback])`: 根据指定的路径展开节点。 - `getChecked([attribute], [startNode])`: 获取选中的节点列表，或者具有特定属性的节点列表。 - `selectPath(path, [attr], [callback])`: 选择路径所对应的节点。 - `getSelectionModel()`: 返回TreePanel所使用的选中模型。 3. **Ext.data.Node 知识点** - `id`: 节点的唯一标识。 - `leaf`: 指示节点是否为叶子节点，即没有子节点。 4. **主要属性** - `id`: 节点的ID。 - `attributes`: 节点的属性集合，可以包含任何与该节点相关的数据。 - `parentNode`: 节点的父节点对象。 - `childNodes`: 子节点数组，包含了当前节点的所有子节点。 - `firstChild`: 第一个子节点，如果不存在则为null。 - `lastChild`: 最后一个子节点，如果不存在则为null。 - `nextSibling`: 下一个兄弟节点，如果不存在则为null。 - `previousSibling`: 上一个兄弟节点，如果不存在则为null。 5. **主要方法** - `appendChild(node|Array node)`: 在当前节点下添加一个或多个子节点。 - `bubble(fn, [scope], [args])`: 从当前节点开始向上遍历调用指定函数，如果函数返回false则停止。 - `cascade(fn, [scope], [args])`: 从当前节点开始向下遍历调用指定函数，如果函数返回false则停止。 - `contains(node)`: 检查当前节点是否包含指定的子节点。 - `eachChild(fn, [scope], [args])`: 遍历当前节点的所有子节点并调用指定函数，如果函数返回false则停止。 - `findChild(attribute, value, [deep])`: 查找具有指定属性和值的子节点，如果`deep`为true，则在整个子树中查找。 EXTJS TreePanel 和 Ext.data.Node 提供了丰富的功能，可以灵活地处理树形数据结构，支持动态加载、选择、事件监听等多种操作。在实际开发中，开发者可以根据需求自定义扩展这些组件，以满足复杂的应用场景。同时，EXTJS 提供了良好的API文档和社区支持，方便开发者进行深入学习和问题解决。