ExtJS 4.2.1 Treeview 节点在组件重新渲染后混乱

Question

在从 4.1.1 升级到 4.2.1 后，我正在修复错误，并且已经被树视图卡住了一段时间。

应用程序首次启动（或页面刷新后）后组件的外观：

问题描述：主屏幕左侧有一个树形视图（类别），屏幕其余部分有一个网格（带有产品）。在我第一次打开屏幕后，树中的类别按预期显示。但是当我单击重新加载按钮时，它会再次加载树存储和网格存储 - 这里有些类别加倍（我猜所有二级节点都加倍）。 AJAX 请求返回相同的数据 - 在每个请求中。

甚至更奇怪的情况：如果我打开另一个组件然后返回此屏幕，则呈现的类别完全混乱。

这是 JSON 响应（始终相同）：

{
    "user":{},
    "data":{
        "children":[
            {
                "category_apps":[{"name":"default text", "domain_id":"17"}],
                "expanded":false,
                "expandable":false,
                "id":"category_with_unassigned_products",
                "logo":"",
                "children":[]},
            {
                "category_apps":[{"category_id":"8390","domain_id":"17","is_active":"1","name":"main category","name_type":"TEXT","url_path":"\/main-category"}],
                "category_id":"8390",
                "level":0,
                "event_id":"1331",
                "expanded":true,
                "expandable":false,
                "id":"main_category",
                "logo":"\/media\/\/event\/1331\/categories\/8390_1376315425.jpg",
                "image":"\/event\/1331\/categories\/8390_1376315425.jpg",
                "children":[
                    {
                        "expanded":true,
                        "category_id":"8598",
                        "expandable":false,
                        "logo":"\/media\/\/event\/1331\/categories\/8598_1376315425.jpg",
                        "image":"\/event\/1331\/categories\/8598_1376315425.jpg",
                        "level":"1",
                        "children":[
                            {
                                "expanded":false,
                                "category_id":"8599",
                                "expandable":false,
                                "logo":"\/media\/\/event\/1331\/categories\/8599_1376315425.jpg",
                                "image":"\/event\/1331\/categories\/8599_1376315425.jpg",
                                "level":"2",
                                "children":[],
                                "category_apps":[{"category_id":"8599","domain_id":"17","is_active":"1","name":"sub subcategory","name_type":"TEXT","url_path":"\/main-category\/main\/sub-subcategory"}]
                            }
                        ],
                        "category_apps":[{"category_id":"8598","domain_id":"17","is_active":"1","name":"main subcategory","name_type":"TEXT","url_path":"\/main-category\/main-subcategory"}]
                    }
                ]
            }
        ]
    }
}

这是负责附加子节点的代码 - 但经过调试后，我知道在处理根的第二个子节点（参见上面的 JSON）后，树中的节点立即显示为双倍和/或立即混乱...

appendChildToRecord: function(child, record, store)
{
    var data = {};
    data[store.proxy.reader.root] = child;
    var newRecords = store.proxy.reader.read(data).records;
    record.appendChild(newRecords);
    return newRecords[0];
}

我们非常感谢任何想法、想法和帮助！

更新：如果我将 ExtJS 切换回版本 4.1.1，树总是会正确加载 - 因此很明显，只有在切换到版本 4.2 后才会出现问题.1。而且在调试时我什至无法揭示问题 - 在某些时候，main_category 的整个节点子树会立即呈现并搞砸......

更新 2：通过调试整个树构建过程，我发现在重新加载类别时，其子项的处理顺序错误。通过处理，我的意思是采取了以下步骤：

1. 获取第一级第一类
2. 添加到根目录
3. 处理children（递归，从第1点开始。）
4. 从该类别的来源中删除 children

在第一次加载时，类别会按正确的顺序处理

1. 类别 1 级
2. 第一类
   1. 类别2级
      1. 第 3 类等级
   2. 类别2级
      1. 第 3 类等级
      2. ...

在第二次和彼此加载时（不刷新浏览器窗口），顺序会改变 - 第一级的第二个类别作为最后一个处理，因此再次添加第二级类别，因此它们加倍。

所以问题是：为什么在重新加载商店时类别（节点/记录）顺序会发生变化？我确定并检查了 JSON 响应没有改变并且总是一样的……

Answer 1

经过额外几个小时的深入调试，我发现根节点（在存储中定义的那个）保持其先前的状态，因此expanded 属性在每次下一次重新加载尝试中保持true。

这导致了第一级类别的问题——因为 ExtJS 认为它已经可见（添加到扩展的根目录）并直接处理子级。因此，第二个一级类别作为最后一个处理 - 未删除子级再次添加（附加）。

修复：在每个tree.store.load();之前我必须将根的expanded属性设置为false：

tree.getRootNode().set('expanded', false);

tree.store.load({
    //...
});

希望这可以帮助遇到同样问题的人...

这解决了我遇到的两个问题——一个是通过按钮重新加载商店，另一个是重新加载整个组件。