Sencha Menu

[Mteixeira]

I've been migrating my project from 4.0 to 4.1.

The picture says it all SenchaMenu.jpg

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 happened in 4.0.

Any thoughts??

Thanks

[Mteixeira]

Well i've solved the align issue by doing 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', {
                shadow: false,
                renderTo: Ext.getBody(),
                items: addChildItems(item.subItems)
            });
        subMenuItems.push(subMenuItem);
    }
    return subMenuItems;
}

But the other bug, where it seems to render two containers, still maintains. The weirdest thing is that it doesn't always happen. The picture bellow shows both situations, when everything is render perfect and when the error occurs:

SenchaMenu.jpg

I am missing something? Or is this a bug??

[Mteixeira]

I've solved it.

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.

From Lolo @StackOverflow