PDA

View Full Version : [CLOSED] Panel scroll event - Version Ext.NET.MVC.Pro.2.1.1



ontiv
Feb 12, 2013, 2:58 PM
Hi @all ,

how can I check if a ext:panel scroll down ?

like this :



$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert();
}
});


Thanks

Daniil
Feb 12, 2013, 4:41 PM
Hi @ontiv,

Please take a look at the example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var onAfterRender = function (panel) {
panel.body.on("scroll", function (e, t) {
if (t.scrollTop - Ext.fly(t).getHeight() >= 0) {
alert("You are at the bottom!");
}
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Panel
runat="server"
Height="200"
Width="200"
AutoScroll="true">
<Items>
<ext:Container runat="server" Height="400" />
</Items>
<Listeners>
<AfterRender Fn="onAfterRender" />
</Listeners>
</ext:Panel>
</form>
</body>
</html>


See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-afterrender
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.AbstractPanel-property-body
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Observable-method-on
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-event-scroll

ontiv
Feb 13, 2013, 8:57 AM
Hello Daniil,

the Listener "AfterRender" was not fired.. ??



<ext:Panel ID="p_center" runat="server" Region="Center" Layout="VBoxLayout" AutoScroll="true" Border="false">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" DefaultMargins="0 50 0 50" />
</LayoutConfig>
<Listeners>
<AfterRender Fn="onAfterRender" />
</Listeners>





<script type="text/javascript">

var onAfterRender = function (panel) {
debugger;

panel.body.on("scroll", function (e, t) {
if (t.scrollTop - Ext.fly(t).getHeight() >= 0) {
alert("You are at the bottom!");
}
});
};

Daniil
Feb 13, 2013, 11:16 AM
It fires for me. Please provide a full sample to reproduce.

Also please try to replace "debugger;" with "alert('test');".

ontiv
Feb 13, 2013, 12:26 PM
Sorry, my mistake!

It fires for me too but the result of the "if query" is always less than zero !?



if (t.scrollTop - Ext.fly(t).getHeight() >= 0) {
alert("You are at the bottom!");
}


5602

Daniil
Feb 13, 2013, 1:39 PM
I was wrong with the condition. Please use:

var onAfterRender = function (panel) {
panel.body.on("scroll", function (e, t) {
if (t.offsetHeight + t.scrollTop >= t.scrollHeight) {
alert("You are at the bottom!");
}
});
};

ontiv
Feb 13, 2013, 2:38 PM
This works fine for me :)
Thank you!