[CLOSED] Scroll Panel into view

  1. #1

    [CLOSED] Scroll Panel into view

    Is there a way to scroll the window or panel so that a specific panel is fully in view?
    Last edited by Daniil; May 11, 2012 at 4:37 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I think you need to use the scrollIntoView method.
    http://docs.sencha.com/ext-js/3-4/#!...scrollIntoView

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var scroll = function (ct, target) {
                target.el.scrollIntoView(ct.body);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Panel 
                ID="MainPanel" 
                runat="server" 
                Height="200" 
                AutoScroll="true">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Scroll to Panel1" StandOut="true">
                                <Listeners>
                                    <Click Handler="scroll(MainPanel, Panel1);" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button runat="server" Text="Scroll to Panel2" StandOut="true">
                                <Listeners>
                                    <Click Handler="scroll(MainPanel, Panel2);" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button runat="server" Text="Scroll to Panel3" StandOut="true">
                                <Listeners>
                                    <Click Handler="scroll(MainPanel, Panel3);" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel 
                        ID="Panel1" 
                        runat="server" 
                        BodyStyle="background-color: yellow;" 
                        Title="Panel 1"
                        Height="200" />
                    <ext:Panel 
                        ID="Panel2" 
                        runat="server" 
                        BodyStyle="background-color: green;" 
                        Title="Panel 2"
                        Height="200" />
                    <ext:Panel 
                        ID="Panel3" 
                        runat="server" 
                        BodyStyle="background-color: blue;" 
                        Title="Panel 3"
                        Height="200" />
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 1
    Last Post: Oct 26, 2012, 8:52 AM
  2. [CLOSED] Scroll event on IFrame Panel
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 19, 2011, 10:56 AM
  3. [CLOSED] How to hide horizontal scroll for Panel
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 18, 2011, 10:03 AM
  4. [CLOSED] Unable to get panel to fit to view port and scroll
    By Labyrinth in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 17, 2010, 9:41 PM
  5. [CLOSED] Scroll to bottom in a Panel
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 29, 2009, 10:58 AM

Posting Permissions