PDA

View Full Version : [FIXED-494][3.1] context menu positioning and sizing



kristian.kuhn
8 Jan 2010, 10:34 AM
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.



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.


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


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.




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;
}

kristian.kuhn
8 Jan 2010, 12:23 PM
See attached screenshots.

jsakalos
9 Jan 2010, 10:09 AM
Thank you.

Do you want this thread to be moved to Feature Requests?

kristian.kuhn
9 Jan 2010, 10:27 AM
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

jsakalos
9 Jan 2010, 10:43 AM
OK, I'm moving it to Bugs, we'll see what will the devel-team say.

Jul
10 Jan 2010, 1:58 PM
+1

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

- Jul

Eric24
11 Jan 2010, 10:09 AM
+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.

ludoo
12 Jan 2010, 1:35 AM
Hi,

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

Well done !!

Thanks!

andron
27 Jan 2010, 7:28 AM
Thanks! This fixed for me issue with height of sub menu! :)

Eric24
27 Jan 2010, 8:05 AM
If this fix in or on the plan for 3.1.1?

Jamie Avins
27 Jan 2010, 8:14 AM
Currently slated for 3.1.1, doubt it will be in for beta2 though.

Jamie Avins
1 Feb 2010, 11:48 AM
Fixed in svn 5967.