Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Jun 2008
    Location
    Egypt
    Posts
    8
    Vote Rating
    1
    kamalhg is on a distinguished road

      1  

    Post [OPEN-947] Menu - wrong position when using enableScrolling with maxHeight

    [OPEN-947] Menu - wrong position when using enableScrolling with maxHeight


    Ext version tested:
    • Ext 3.2.0
    • Ext 3.2.1
    Adapter used:
    • ext
    css used:
    • ext-all.css
    Browser versions tested against:
    • FF3.0 (firebug 1.4.2 installed)
    • FF3.6.3 (firebug 1.4.5 installed)
    • IE6
    • IE8
    • Google Chrome 4.1


    Operating System:
    • WinXP Pro
    Description:
    • The menu position changes depending on number of items in the menu, menu maxHeight and the viewport height
    Test Case:
    Code:
    Ext.onReady(function(){    
        new Ext.Window({
            height:600,
            width:800,
            y:500,
            tbar:[{
                text: 'Case 1',
                menu:{
                    maxHeight:200,        
                    enableScrolling  :true,
                    items:[
                        
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'}
                    ]
                }
            },
            {
                text: 'Case 2',
                menu:{
                    maxHeight:200,        
                    enableScrolling  :true,
                    items:[
                        
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'},
                        {text: 'Item 7'},
                        {text: 'Item 8'},
                        {text: 'Item 9'},
                        {text: 'Item 10'},
                        {text: 'Item 11'},
                        {text: 'Item 12'},
                        {text: 'Item 13'},
                        {text: 'Item 14'}
                    ]
                }
            },
            {
                text: 'Case 3',
                menu:{
                    maxHeight:200,        
                    enableScrolling  :true,
                    items:[
                        
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'},
                        {text: 'Item 7'},
                        {text: 'Item 8'},
                        {text: 'Item 9'},
                        {text: 'Item 10'},
                        {text: 'Item 11'},
                        {text: 'Item 12'},
                        {text: 'Item 13'},
                        {text: 'Item 14'},
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'},
                        {text: 'Item 7'},
                        {text: 'Item 8'},
                        {text: 'Item 9'},
                        {text: 'Item 10'},
                        {text: 'Item 11'},
                        {text: 'Item 12'},
                        {text: 'Item 13'},
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'},
                        {text: 'Item 7'},
                        {text: 'Item 8'},
                        {text: 'Item 9'},
                        {text: 'Item 10'},
                        {text: 'Item 11'},
                        {text: 'Item 12'},
                        {text: 'Item 13'},
                        {text: 'Item 14'},
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'},
                        {text: 'Item 7'},
                        {text: 'Item 8'},
                        {text: 'Item 9'},
                        {text: 'Item 10'},
                        {text: 'Item 11'},
                        {text: 'Item 12'},
                        {text: 'Item 13'},
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'},
                        {text: 'Item 7'},
                        {text: 'Item 8'},
                        {text: 'Item 9'},
                        {text: 'Item 10'},
                        {text: 'Item 11'},
                        {text: 'Item 12'},
                        {text: 'Item 13'},
                        {text: 'Item 14'},
                        {text: 'Item 1'},
                        {text: 'Item 2'},
                        {text: 'Item 3'},
                        {text: 'Item 4'},
                        {text: 'Item 5'},
                        {text: 'Item 6'},
                        {text: 'Item 7'},
                        {text: 'Item 8'},
                        {text: 'Item 9'},
                        {text: 'Item 10'},
                        {text: 'Item 11'},
                        {text: 'Item 12'},
                        {text: 'Item 13'},
                        {text: 'Item 14'}
                    ]
                }
            }]
        }).show();    
    });
    See this URL : here


    Steps to reproduce the problem:
    • create a menu with enableScrolling:true and maxHeight:value
    The result that was expected:
    • the menu should be aligned to the button
    The result that occurs instead:
    • the menu position changes depending on number of items.


    Screenshot or Video:
    case1.jpgcase2.jpgcase3.jpg

    Regards,
    Kamal

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2010
    Location
    Melbourne, Australia
    Posts
    9
    Vote Rating
    0
    markmansour is on a distinguished road

      0  

    Default


    What is the status of this bug? I ran into it today.

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Location
    Taiwan
    Posts
    3
    Vote Rating
    0
    dianext is on a distinguished road

      0  

    Default


    Hi every,
    you can try this
    overwrite menw.showAt function

    Code:
    showAt: function(xy, parentMenu) {
    
        if (this.fireEvent('beforeshow', this) !== false) {
            this.parentMenu = parentMenu;
                                                    
            if (!this.el) {
                this.render();
            }
            if (this.enableScrolling) {
                // set the position so we can figure out the constrain value.
                this.el.setXY(xy);
                //constrain the value, keep the y coordinate the same
                xy[1] = this.constrainScroll(xy[1]);
                // xy = [this.el.adjustForConstraints(xy)[0], xy[1]];
                var btn = this.ownerCt;
                // get new XY
                xy = this.el.getAlignToXY(btn.el, btn.menuAlign || this.defaultAlign, this.defaultOffsets);
            } else {
                //constrain to the viewport.
                xy = this.el.adjustForConstraints(xy);
            }
            this.el.setXY(xy);
            this.el.show();
            Ext.menu.Menu.superclass.onShow.call(this);
            if (Ext.isIE) {
                // internal event, used so we don't couple the layout to the menu
                this.fireEvent('autosize', this);
                if (!Ext.isIE8) {
                    this.el.repaint();
                }
            }
            this.hidden = false;
            this.focus();
            this.fireEvent('show', this);
        }
    },

Thread Participants: 2