PDA

View Full Version : What units for panel.body.getScroll().top



glafrance
1 May 2013, 1:07 PM
When I print to console panel.body.getScroll().top when I have scrolled to bottom in panel the output is 2007. When I scroll to top of panel output is 0. But the panel is not that big, so what are the units for panel.body.getScroll().top ?

I basically need to detect when user has scrolled to bottom of panel containing HTML in body.

Thanks in advance.

glafrance
1 May 2013, 2:27 PM
Can anyone comment on this please? I've spent hours trying to figure out why this gives a value several times greater than the window height. Just doesn't make sense, and the docs don't give any hint into this.

glafrance
1 May 2013, 3:03 PM
Here is some simplified code. If you scroll to the bottom the console outputs 1210.


Ext.onReady( function (){
var window2 = new Ext.Window({
height: 250, width: 450, autoShow: true, border: false, plain: true, title: 'HTML File',
items: [{
html: '', layout: 'fit', autoScroll: true, id: 'myText', width: 440,height: 200,
autoScroll: true,
listeners: {
render: function () {
this.body.on('scroll', function () {
console.log(Ext.getCmp('myText').body.getScroll().top);
});
}
}
}]
}).show();

var panel = Ext.getCmp('myText');
if (panel.body) {
panel.body.insertHtml("beforeEnd", '<P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P>');
}
});

evant
1 May 2013, 3:10 PM
Not really sure what the confusion is:



Ext.require('*');

Ext.onReady(function() {

document.body.innerHTML = '<P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P>';
console.log(document.body.scrollHeight);
});


The scrollHeight is ~2300: https://developer.mozilla.org/en-US/docs/dom/element.scrollheight

All height values you get from elements are in pixels.

glafrance
1 May 2013, 3:23 PM
Let me ask this another way. How can I detect that the user has scrolled all the way to the bottom of the vertical scroll bar?

glafrance
1 May 2013, 3:29 PM
I thought you might be hinting that if panel.body.getScroll().top is equal to panel.body.scrollHeight then the user scrolled to the bottom, but panel.body.scrollHeight is undefined, so is there something else I should be comparing panel.body.getScroll().top to in order to know user has scrolled to bottom?

evant
1 May 2013, 3:30 PM
Ext.require('*');

Ext.onReady(function() {
var window2 = new Ext.Window({
height: 250,
width: 450,
autoShow: true,
title: 'HTML File',
items: [{
layout: 'fit',
autoScroll: true,
id: 'myText',
width: 440,
height: 200,
autoScroll: true,
listeners: {
render: function() {
var target = this.getTargetEl(),
dom = target.dom;

target.on('scroll', function() {
if (dom.scrollTop >= (dom.scrollHeight - dom.clientHeight)) {
console.log('bottom');
}
});
}
}
}]
}).show();

var panel = Ext.getCmp('myText');
panel.update('<P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P><P>text text</P>');
});

glafrance
1 May 2013, 3:49 PM
I'll give that a try, but in your code you are not using getScroll() of Ext.dom.Element.

In fact, your code seems to make no use of the methods supplied by the ExtJS class at all.

I would think that if the class has a getScroll() method, then there would be a way to use it in a somewhat simple way to detect the scroll position in a more useable manner.

glafrance
1 May 2013, 4:03 PM
Got it to work Evan. A little strange considering what ExtJS is supposed to offer us, but it works, so thanks!