Ext JS 后端数据树之多层级节点自动展开失败问题分析与解决

在 ExtJS+SpringBoot实现读取后端数据的树 中介绍了如何获取后端数据进行书的显示。 通过设置节点的expanded 为true 会自动调用后端接口并展出下一级， 但是在实际开发中发现： 如果树的数据量较大， 展开的层级大于1级， 则会出现第二层节点无法展出的状况， 通过Chrome 的控制台可以看到如下错误：

Util.js?_dc=1665383584923:973 [E] Error while running task - TypeError: Cannot read property 'insertBefore' of null
Caller: function() {

从错误信息来看， 是在插入节点时出错，看上去的原因是上一层的节点还没有渲染好就进行插入，导致null 的错误。 稍微追踪了一下， 树的节点的展开操作是异步执行的，所以在多层展开节点的时候， 如果上一层没有渲染好，而下一层有开始展出的时候就恨又可能出现整个问题了。

解决的思路就是后端返回的数据的节点的expanded 全部设置为false，也就不自动展出， 而是在前端手动调用对应的方法进行节点的展开。具体解决方案如下：
所有后端都不设置自动展开，提供一个接口返回需要展开的多级节点的id（比如第一层展开的节点的id 是 level1Id，第二层是level2Id ），在treestore的 load 事件进行处理， 在展出根节点时调用这个接口， 或许需要展出的id, 调用expand 方法进行展出。

该解决方案对应的概念代码如下：