Results 1 to 10 of 10

Thread: Shade below menu

  1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    19
    Vote Rating
    0
      0  

    Default Shade below menu

    Hi

    I have an issue, the north panel in my screen contains menu and I am using the entire center panel for other content. Now when I view the page in a maximised firefox window, the screen looks ok, but when I minimize the window, a shadow is coming below the menu. It occurs randomly even if the window is maximized.
    It occurs in IE and google chrome also.

    Can you please check the screens attached and help me get rid of the bug?

    Thank you!
    Attached Files Attached Files

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    We'll need to see the config you used to create this layout.

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    Next time, please use [CODE] tags to post code!!!

    Your problem is that the north region has:
    Code:
    contentEl : 'northPanel'
    Why? It doesn't contain anything.

  4. #4
    Ext User
    Join Date
    Nov 2009
    Posts
    19
    Vote Rating
    0
      0  

    Default

    Ok, thank you for the tip. I will use [Code] tag next time.

    no, I include the menu.jsp in all my pages, and give my actual page content in div-centerpanel.

    I did not post my entire js code. Northpanel has menu toolbar as its content.
    Code:
    Ext.onReady(function() {
        Ext.QuickTips.init();
    
        var win, tb;
        var menu1 = new Ext.menu.Menu( {
            id : 'mainMenu',
            style : {
                overflow : 'visible'
            },
            items : [ {
                text : 'page11',
                icon : './images/preview.png',
                handler : onItemClick1
            }, {
                text : 'page12',
                icon : './images/preview.png',
                handler : onItemClick2
            }, {
                text : 'page13',
                icon : './images/preview.png',
                handler : onItemClick
            }, {
                text : 'page14',
                icon : './images/preview.png',
                handler : onItemClick1
            }, {
                text : 'page15',
                icon : './images/preview.png',
                handler : onItemClick2
            } ]
        });
    
        var menu2 = new Ext.menu.Menu( {
            id : 'mainMenu1',
            style : {
                overflow : 'visible'
            },
            items : [ {
                text : 'page21',
                icon : './images/preview.png',
                handler : onItemClick1
            }, {
                text : 'page22',
                icon : './images/preview.png',
                handler : onItemClick2
            }, {
                text : 'page23',
                icon : './images/preview.png',
                handler : onItemClick
            } ]
        });
    
        var menu3 = new Ext.menu.Menu( {
            id : 'mainMenu2',
            style : {
                overflow : 'visible'
            },
            items : [ {
                text : 'page31',
                icon : './images/preview.png',
                handler : onItemClick1
            }, {
                text : 'page32',
                icon : './images/preview.png',
                handler : onItemClick2
            } ]
        });
    
        tb = new Ext.Toolbar();
        // tb.render('toolbar');
    
            tb.add( {
                text : 'Menu1',
                icon : './images/menu-show.gif',
                menu : menu1
            });
    
            menu1.addSeparator();
    
            tb.add( {
                text : 'Menu2',
                icon : './images/menu-show.gif',
                menu : menu2
            });
    
            menu2.addSeparator();
    
            tb.add( {
                text : 'Menu3',
                icon : './images/menu-show.gif',
                menu : menu3
            });
    
            menu3.addSeparator();
    
            function onItemClick(item) {
                Ext.Msg.alert('Menu Click',
                        'You clicked the \'' + item.text + '\'');
            }
    
            function onItemClick1(item) {
                window.location = "SearchPage.jsp";
            }
    
            function onItemClick2(item) {
                window.location = "Temp.jsp";
            }
    
            new Ext.Viewport( {
                layout : 'border',
                items : [ {
                    region : 'north',
                    autoHeight : true,
                    border : false,
                    margins : '0 0 25 0',
                    collapsible : false,
                    items : tb,
                    contentEl : 'northPanel'
                }, {
                    region : 'center',
                    contentEl : 'centerPanel',
                    autoScroll : true
    
                } ]
            });
        });

  5. #5
    Ext User
    Join Date
    Nov 2009
    Posts
    19
    Vote Rating
    0
      0  

    Default

    It actually contains menu toolbar in the northpanel.

  6. #6
    Ext User
    Join Date
    Nov 2009
    Posts
    19
    Vote Rating
    0
      0  

    Default

    Hi Condor,

    Can you please check the code I have pasted in the previous messages and tell what went wrong?

    Thanks!

  7. #7
    Ext User
    Join Date
    Nov 2009
    Posts
    19
    Vote Rating
    0
      0  

    Default

    I have inspected the menu using firebug.
    If I comment the style " position: absolute" of .x-border-panel in ext-all.css, the shade is coming at the bottom of the page instead of sticking to the menu.
    In a hidden div, it shows a table with tr as x-toolbar-extras-row.
    please tell me how I can avoid this?

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    Try:
    Code:
    {
        region : 'north',
        autoHeight : true,
        border : false,
        margins : '0 0 25 0',
        collapsible : false,
        items : tb,
        //contentEl : 'northPanel'
        layout: 'anchor',
        defaults: {anchor: '0'}
    }

  9. #9
    Ext User
    Join Date
    Nov 2009
    Posts
    19
    Vote Rating
    0
      0  

    Default

    no, it does not work

  10. #10
    Ext User
    Join Date
    Nov 2009
    Posts
    19
    Vote Rating
    0
      0  

    Thumbs up

    I removed the layout property and the menu shade disappeared.

    Thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •