1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Answers
    6
    Vote Rating
    0
    Mteixeira is on a distinguished road

      0  

    Default Answered: Sencha Menu

    Answered: Sencha Menu


    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:

    Code:
    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

  2. 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

  3. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Answers
    6
    Vote Rating
    0
    Mteixeira is on a distinguished road

      0  

    Default


    Well i've solved the align issue by doing this:

    Code:
    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??

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Answers
    6
    Vote Rating
    0
    Mteixeira is on a distinguished road

      0  

    Default


    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