ExtJS 6 — проблема при добавлении новых элементов на панель аккордеона

У меня есть новое приложение 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 пунктов, добавленных в мое меню, но вот что я получаю:

введите здесь описание изображения

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

введите здесь описание изображения

Тогда мой результат следующий:

введите здесь описание изображения

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

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


extjs extjs5 extjs6
person VAAA    schedule 05.06.2016    source источник
comment
в первом разделе кода вы добавляете меню2, но в коде отладки это просто меню. может кеш браузера имеет старую копию?   -  person Kevin Collins    schedule 05.06.2016
comment
Извините, здесь опечатка, только что обновил вопрос.   -  person VAAA    schedule 05.06.2016
comment
возможно, попробуйте удалить вызов menuPanel.updateLayout(). я не думаю, что вам нужно вызывать это, и похоже, что он выполняется до того, что находится в Ext.each.   -  person Kevin Collins    schedule 05.06.2016
comment
Я удаляю его и такое же поведение   -  person VAAA    schedule 05.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте добавить их одним вызовом:

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);
    }
});
person CD..    schedule 05.06.2016