Question

I’ve been migrating my project from ExtJS 4.0 to 4.1. This picture says it all:

This is how I build the menu:

function addItems(items) {
    var toolBarItems = [];
    for (var i = 0; i < items.length; i++) {
        var newItem = {
            text: items[i].Name,
            command: items[i].Command,
            height: 24,
            cls: 'toolbarbtn'
        };
        if (items[i].subItems === undefined || items[i].subItems === []) {
            newItem.handler = clickToolbarItemHandler;
        }
        else {
            newItem.menu = Ext.create('Ext.menu.Menu', {
                items: addChildItems(items[i].subItems)
             }); 
        }
        toolBarItems.push(Ext.create('Ext.button.Button', newItem));
    }
    return toolBarItems;
}

function addChildItems(subItems) {
    var subMenuItems = [];
    for (var i in subItems) {
        var item = subItems[i];

        var subMenuItem = {
            text: item.Name,
            command: item.Command,
            shadow: false,
            cls: 'toolbarbtn' 
        };

        if (item.subItems === undefined || item.subItems === []) {
            subMenuItem.handler = clickToolbarItemHandler;
        }
        else
            subMenuItem.menu = Ext.create('Ext.menu.Menu', {
                items: addChildItems(item.subItems)
            });
        subMenuItems.push(subMenuItem);
    }
    return subMenuItems;
}

This didn’t happen in 4.0, and I can’t seem to find an explanation as to why it’s happening now. Any thoughts?

UPDATE:

@Lolo: Thanks for remind me to update the css files.

Unfortunately it didn’t solve the problem.

I tried to add a renderTo like this:

function addChildItems(subItems) {
var subMenuItems = [];
for (var i in subItems) {
    var item = subItems[i];

    var subMenuItem = {
        text: item.Name,
        command: item.Command,
        cls: 'toolbarbtn' 
    };

    if (item.subItems === undefined || item.subItems === []) {
        subMenuItem.handler = clickToolbarItemHandler;
    }
    else
        subMenuItem.menu = Ext.create('Ext.menu.Menu', {
            //TODO: MIGV4
            shadow: false,
            renderTo: Ext.getBody(),
            items: addChildItems(item.subItems)
        });
    subMenuItems.push(subMenuItem);
}
return subMenuItems;

}

And it did solve the sub menu align issue, but some unexpected error still occurs. Once again the picture says it all:

This bug only happens when rendering the menu for the 1st time. When i test again it works just fine.

Any thoughts??

Answer 1

I don’t think this issue is related with you JS code. Looks like some style problems. Have you switched to the new css file also? I reproduced this behaviour by including JS source from 4.1 and CSS file from 4.0. See example: http://jsfiddle.net/ukqYU/2/

Obvious fix is to link proper CSS file.

EDIT:
I found out that in 4.1 they changed .x-layer class style a bit, which may cause this problem. Try to change position:absolute; to position: absolute !important; in .x-layer. Then you should be good.