CODEWITHSUNDEEP
extjsextjs5extjs6
VAAA
VAAA

Reputation: 15039

ExtJS 6 - Issue while adding new items to accordion panel

I have a new ExtJS 6 application and Im trying to populate an accordion menu.

Note: This same code works perfect in ExtJS 4.2.

This is the accordion component:

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ú',
});

Now, I have in my ViewController a store that I load, this is the code:

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

My store records count = 7, so I should see 7 items added to my menu, but this is what I get:

enter image description here

If I again do the same but adding a breakpoint in my debuggin console (image below)

enter image description here

Then my result is the following:

enter image description here

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

Any clue on this issue?

Upvotes: 0

Views: 356

Answers (1)

CD..
CD..

Reputation: 74156

Try adding them in one call:

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

Upvotes: 1

Related Questions