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

  1. #1

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

    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
    Last edited by Daniil; Feb 13, 2013 at 2:41 PM. Reason: [CLOSED]
  2. #2
    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/#!...nt-afterrender
    http://docs.sencha.com/ext-js/4-1/#!...-property-body
    http://docs.sencha.com/ext-js/4-1/#!...able-method-on
    http://docs.sencha.com/ext-js/4-1/#!...t-event-scroll
  3. #3
    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!");
                    }
                });
            };
  4. #4
    It fires for me. Please provide a full sample to reproduce.

    Also please try to replace "debugger;" with "alert('test');".
  5. #5
    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!");
    }
    Click image for larger version. 

Name:	ext.net scroll.png 
Views:	48 
Size:	38.4 KB 
ID:	5602
    Last edited by ontiv; Feb 13, 2013 at 12:30 PM.
  6. #6
    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!");    
            }
        });
    };
  7. #7
    This works fine for me :)
    Thank you!

Similar Threads

  1. [CLOSED] How to detect scroll event inside iframe
    By nhg_itd in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 05, 2012, 2:31 AM
  2. [CLOSED] Scroll event on IFrame Panel
    By nhg_itd in forum 1.x Premium Help
    Replies: 3
    Last Post: Oct 19, 2011, 11:56 AM
  3. the scroll property of the panel is not valid
    By animalisme in forum 1.x Help
    Replies: 4
    Last Post: Aug 10, 2009, 5:35 AM
  4. [CLOSED] Scroll to bottom in a Panel
    By Jurke in forum 1.x Premium Help
    Replies: 6
    Last Post: May 29, 2009, 11:58 AM
  5. Replies: 1
    Last Post: Apr 02, 2009, 12:30 PM

Posting Permissions