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 пунктов добавлены в мое меню, но это то, что я получаю:

Если я снова сделать то же самое, но добавление точки останова в моей debuggin консоли (изображение ниже)

Тогда мой результат заключается в следующем:

Этот вопрос ломаю голову и действительно очень странно, она работает, если я отлаживаю добавление точки останова, чтобы она работала.

Любые подсказки по этому вопросу?

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