PDA

View Full Version : Element 'scroll' event: getBody() vs getDoc() in IE



arthurakay
16 Dec 2010, 7:18 AM
I have an application where I need my grid's toolbar to remain fixed at the top of the browser if the user scrolls past the top of the grid (the grid has autoHeight set to true).

I've managed to get this working just fine... but I noticed something in IE and I wanted an explanation.



...
listeners: {
'render': function(thisComponent) {
var body = Ext.getDoc();
var bodyWidth = Ext.getBody().getWidth();

var toolbar = Ext.get('floatingBar');
var topOffset = toolbar.getTop();
var leftOffset = toolbar.getLeft();

function resetStyle() {
toolbar.setStyle({
position: 'relative',
top: '',
left: ''
});
}

function scrollListener (event, element, options) {
// has the page been resized?
if (Ext.getBody().getWidth() != bodyWidth) {
resetStyle(); //temporarily reset the position to get the correct offset
bodyWidth = Ext.getBody().getWidth();
leftOffset = toolbar.getLeft();

//call this method again to correctly place the toolbar
scrollListener(event, element, options);
}

if (Ext.get(element).getScroll().top > topOffset){
toolbar.setStyle({
position: 'fixed',
top: '0px',
left: leftOffset + 'px'
});
}
else {
resetStyle();
}
}

body.on('scroll', scrollListener);
body.on('unload', scrollListener);
}
}
...


Like I said, this works fine - except in IE. IE works only if I define:

var body = Ext.getBody();

...but then Firefox and Chrome/Safari don't work.

I can easily sniff the browser using Ext.isIE - but I'm curious if anyone knows WHY this happens.