ExtJS 6 - 向手风琴面板添加新项目时出现问题答案

【问题标题】：ExtJS 6 - Issue while adding new items to accordion panelExtJS 6 - 向手风琴面板添加新项目时出现问题
【发布时间】：2016-06-05 18:05:43
【问题描述】：

我有一个新的ExtJS 6 应用程序，我正在尝试填充手风琴菜单。

注意：同样的代码在 ExtJS 4.2 中完美运行。

这是手风琴组件：

Ext.define('MyApp.view.menu.Accordion', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mainmenu',
    width: 350,
    split: true,
    layout: {
        type: 'accordion',
        autoScroll: true,
        autoHeight: true,
        titleCollapse: false,
        animate: false,
        activeOntop: true
    },
    collapsible: true,
    floatable: false,
    hideCollapseTool: false,
    title: 'Menú',
});

现在，我在我的 ViewController 中有一个我加载的存储，这是代码：

var menuPanel = Ext.ComponentQuery.query('mainmenu')[0];


storeMenu.load({
    callback: function(records, op, success) {

        menuPanel.removeAll();


        Ext.each(records, function(rec) {


            var title = rec.data.title;


            var menu = Ext.create({
                xtype: 'treepanel',
                rootVisible: false,
                title: 'This is a test'
            });


            menuPanel.add(menu);


        });

        menuPanel.updateLayout();
    }
});

我的商店记录数 = 7，所以我应该看到 7 项添加到我的菜单中，但这是我得到的：

如果我再次执行相同操作，但在调试控制台中添加断点（下图）

那么我的结果如下：

这个问题让我头疼，真的很奇怪，如果我调试添加断点以使其正常工作，它就可以工作。

关于这个问题的任何线索？

【问题讨论】：

在第一部分代码中，您添加了 menu2，但在调试代码中它只是菜单。也许浏览器缓存有旧副本？
抱歉这里打错了，刚刚更新了问题。
也许尝试删除对 menuPanel.updateLayout() 的调用。我认为您不需要调用它，而且看起来它可能在 Ext.each 中的内容之前被执行。
我删除它是一样的行为

标签： extjs extjs5 extjs6

【解决方案1】：

尝试在一次调用中添加它们：

storeMenu.load({
    callback: function(records, op, success) {
        var panels;

        Ext.suspendLayouts();
        menuPanel.removeAll();

        panels = Ext.Array.map(records, function(rec){
          var title = rec.get('title');

          return {
            xtype: 'treepanel',
            rootVisible: false,
            title: title
          };
        });

        menuPanel.add(panels);  
        Ext.resumeLayouts(true);
    }
});

【讨论】：