PDA

View Full Version : Scroll down to load content in panel



venkatraman
16 May 2013, 1:57 AM
Hi everyone,

I created one panel to load content through server side. using one button to load next few content. but i want to load automatically when i do scroll down. please give me some idea to do this.

Thanks in advance
venkat

evant
16 May 2013, 2:08 AM
Listen to the scroll event on the element. If the scrollTop is within (x) of the scrollHeight, trigger if your load and then append the content.

venkatraman
16 May 2013, 3:27 AM
thanks for replying my post evant.

can you please suggest me any sample code here. i'm new to extjs

evant
16 May 2013, 3:43 AM
el.on('scroll', function(e, t){

var factor = 100;
if (t.scrollHeight - t.scrollTop < factor) {
Ext.Ajax.request({
url: 'foo',
success: function(response){
el.dom.innerHTML = el.dom.innerHTML + response.responseText;
}
});
}

});

venkatraman
16 May 2013, 10:50 AM
It works fine evant. but the problem is whenever i scroll that event will occur but i want to occur only when i reach the bottom of the page.please give me some suggestion

thanks
venkat

evant
16 May 2013, 2:47 PM
That's why the scrollHeight/scrollTop check is there, whenever you get within <x> pixels of the bottom, it will trigger.

venkatraman
16 May 2013, 10:33 PM
ya i got that evant. but if i'm using different machine the scrollTop value is different so i want to check condition in some other way. Is it possible to achieve any way.

thanks
venkat

evant
16 May 2013, 11:20 PM
What do you mean check it in another way? The only thing that changes is the scrollTop on the element.

venkatraman
16 May 2013, 11:44 PM
thanks for replying my all post and giving me suggestions evant. Finally i done that using clientHeight to check the right condition. It works correct in all kind of monitors:).

thanks again
venkat

venkatraman
17 May 2013, 12:16 AM
I have one doubt evant. I am having fileupload tag in my form. If i upload some file in that tag i'm getting image preview in client side but i want one additional feature to check the image dimension while i'm uploading any image. Is it possible to achieve in client side vailidation

Thanks in advance
Venkat