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 项添加到我的菜单中，但这是我得到的：

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

那么我的结果如下：

The issue is breaking my head and is really very strange, it works if I debugg adding a breakpoint in order it to work.

关于这个问题有什么线索吗？

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

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

ExtJS 6 - Issue while adding new items to accordion panel

extjs

extjs5

extjs6