ExtJS 6 - 向手风琴专家组添加新项目时出现问题

Question

我有一个新的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个项目添加到我的菜单中，但这就是我得到的：

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

然后我的结果如下：

  

这个问题让我很头疼并且非常奇怪，如果我调试添加断点以使其正常工作，它就有效。

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

Answer 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);
    }
});