Question

我正在从4.1.1升级到4.2.1之后进行错误修正，并且已经暂时停留了一段树视图。

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

expected look

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

subcategories are doubled

甚至更奇怪的情况：如果我打开另一个组件然后回到这个屏幕，那么这些类别会完全混乱。

even more messed up...

这是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后才会出现问题0.1。我甚至无法在调试时揭示问题 - 在某些时候，main_category的整个节点子树一次呈现并搞砸了......

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

获得第一级第一类
添加到根
进程children（递归，从第1点开始。）
从该类别的来源中删除children

首次加载时，按正确的顺序处理类别

category 1st lvl
类别1st lvl
1. 类别第二级lvl
  1. category 3rd lvl
2. 类别第二级lvl
  1. category 3rd lvl
  2. ...

在第二个和每个其他负载（没有刷新浏览器窗口）上更改订单 - 第一个级别的第二个类别被处理为最后一个，因此第二个级别类别再次添加，因此它们加倍。

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

Answer 1

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

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

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

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

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

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

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

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

1 个答案: