Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: [FIXED-494][3.1] context menu positioning and sizing

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Maryland, United States
    Posts
    8
    Vote Rating
    0
      0  

    Default [FIXED-494][3.1] context menu positioning and sizing

    In Ext 3.1 the floating menu's are not sizing properly when the document height is larger than the view height when you right click at the bottom on the view. They are sized very small and cannot be used. Secondly the sizing algorithm for fitting a floating menu into a view space smaller than the menu's full height sizes the menu extremely small and unusable. In addition the algorithm for calculating the max available height for the menu does not account for scroll position of the document body causing unusual behavior described below.

    The problems are in the constrainScroll method on Menu. I have modified that method to resolve these issues.

    1. The y coordinate needs to be normalized to account for the scrollTop offset so that we are all playing in the same coordinate space. If you don't do this max can become negative when the position y coordinate is larger than the height of the view.

    Code:
                var pe = Ext.fly(this.el.dom.parentNode);
                var st = pe.getScroll().top;
                var vh = pe.getViewSize().height;
                //Normalize y by the scroll position for the parent element.  Need to move it into the coordinate space
                //of the view.
                var norm_y = y - st;
                max = this.maxHeight ? this.maxHeight : vh - norm_y;
    2. The max value and y coordinate are adjusted to best fit and size the menu into the available space. First we check to see if full is larger than the view height(vh). If it is we set max to vh so that the menu will get as big as possible and adjust the y position. Secondly if full is less than vh we can fit the menu in the view space we just need to adjust the y position so that the menu fits.

    Code:
                if(full > vh) {
                    max = vh;
                    //Set new_y equal to (0,0) in view space by reducing y by the value of norm_y
                    new_y = y - norm_y;
                } else if(max < full) {
                    new_y = y - (full - max);
                    max = full;
                }
    3. Finally we return the adjusted y position which is used to overwrite the previous y position in the showAt method on Menu.

    Snippet from showAt

    Code:
                if(this.enableScrolling){
                    // set the position so we can figure out the constrain value.
                    this.el.setXY(xy);
                    //CS: override y to push the point up to fit the menu if
                    //there is enough space above the point
                    xy[1] = this.constrainScroll(xy[1]);
                    xy = [this.el.adjustForConstraints(xy)[0], xy[1]];
                }else{
                    //constrain to the viewport.
                    xy = this.el.adjustForConstraints(xy);
                }
    The complete code for constrainScroll is below. We were hoping this could be incorporated into the baseline or if this is not the best solution a similar solution could be incorporated.



    Code:
        constrainScroll : function(y){
            var max, full = this.ul.setHeight('auto').getHeight();
            var new_y = y;
            if(this.floating){
                var pe = Ext.fly(this.el.dom.parentNode);
                var st = pe.getScroll().top;
                var vh = pe.getViewSize().height;
                //Normalize y by the scroll position for the parent element.  Need to move it into the coordinate space
                //of the view.
                var norm_y = y - st;
                max = this.maxHeight ? this.maxHeight : vh - norm_y;
                
                if(full > vh) {
                    max = vh;
                    //Set new_y equal to (0,0) in view space by reducing y by the value of norm_y
                    new_y = y - norm_y;
                } else if(max < full) {
                    new_y = y - (full - max);
                    max = full;
                }                        
            }else{
                max = this.getHeight();
            }
                           
            if(full > max && max > 0){
                this.activeMax = max - this.scrollerHeight * 2 - this.el.getFrameWidth('tb') - Ext.num(this.el.shadowOffset, 0);
                this.ul.setHeight(this.activeMax);
                this.createScrollers();
                this.el.select('.x-menu-scroller').setDisplayed('');
            }else{
                this.ul.setHeight(full);
                this.el.select('.x-menu-scroller').setDisplayed('none');
            }
            this.ul.dom.scrollTop = 0;
            
            return new_y;
        }

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Maryland, United States
    Posts
    8
    Vote Rating
    0
      0  

    Default Screenshots illustrating the problem and the fix

    See attached screenshots.
    Attached Images Attached Images

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    402
      0  

    Default

    Thank you.

    Do you want this thread to be moved to Feature Requests?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Maryland, United States
    Posts
    8
    Vote Rating
    0
      0  

    Default

    I guess that would depend on whether you think it is a bug or new feature. It doesn't much matter to me as long as we can incorporate the solution or something similar into the baseline. If it's easier for you to manage as a feature request that is fine with me. Thanks for your help.

    kristian

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    402
      0  

    Default

    OK, I'm moving it to Bugs, we'll see what will the devel-team say.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    216
    Vote Rating
    0
      0  

    Default

    +1

    We have seen this behavior as well and would love to see this or a similar fix incorporated into Ext.

    - Jul

  7. #7
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    534
    Vote Rating
    0
      0  

    Default

    +1

    This is a bug. I think it was introduced in 3.0 or just before, because unchanged code that didn't show this issue before did around that time. Unfortunately, we didn't notice the problem until we had gone through several patch releases, so I can't say exactly where it happened.

  8. #8
    Sencha User ludoo's Avatar
    Join Date
    Mar 2007
    Location
    France
    Posts
    67
    Vote Rating
    3
      0  

    Thumbs up Great bugfix!

    Hi,

    I'd got the same the problem, and this override fixes it well.

    Well done !!

    Thanks!

  9. #9
    Ext User
    Join Date
    Jan 2008
    Posts
    2
    Vote Rating
    0
      0  

    Default This is a bug!

    Thanks! This fixed for me issue with height of sub menu!

  10. #10
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    534
    Vote Rating
    0
      0  

    Default

    If this fix in or on the plan for 3.1.1?

Page 1 of 2 12 LastLast

Posting Permissions

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