What's New?

Swipe Example

  1. #1
    Mar 05, 2015, 10:56 AM

    Swipe Example

    On the following sample, swipe to expand / collapse viewport's regions.

    It works for Desktop, Phone and Tablet.

    <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        var OnSwipe = function (e) {
            switch (e.direction) {
                case "left":
                    App._west.toggleCollapse();
                    break;
                case "right":
                    App._east.toggleCollapse();
                    break;
                case "up":
                    App._north.toggleCollapse();
                    break;
                case "down":
                    App._south.toggleCollapse();
                    break;
            }
        }
        var AfterLayout = function () {
            App._swipeLeft.alignTo(App._center.body, 'l', [0, 0], true);

            App._swipeRight.alignTo(App._center.body, 'r', [-App._swipeRight.getWidth(), 0], true);

            App._swipeTop.alignTo(App._center.body, 't', [-(App._swipeTop.getWidth() / 2), 0], true);

            App._swipeBottom.alignTo(App._center.body, 'b', [-(App._swipeBottom.getWidth() / 2), -App._swipeBottom.getHeight()], true);
        }
    </script>
</head>
<body>
    <ext:ResourceManager Theme="Crisp" ScriptMode="Debug" runat="server" />
    <ext:Viewport Layout="FitLayout" Border="false" runat="server">
        <Items>
            <ext:Panel runat="server" Layout="BorderLayout" Border="false" BodyBorder="0">
                <Items>
                    <%--WEST--%>
                    <ext:Panel ID="_west" Region="West" Title="West" Html="West Region" Width="200" Collapsible="true" Collapsed="true" AnimCollapse="true" runat="server" />
                    <%--EAST--%>
                    <ext:Panel ID="_east" Region="East" Title="East" Html="East Region" Width="200" Collapsible="true" Collapsed="true" AnimCollapse="true" runat="server" />
                    <%--NORTH--%>
                    <ext:Panel ID="_north" Region="North" Title="North" Html="North Region" Height="200" Collapsible="true" Collapsed="true" AnimCollapse="true" runat="server" />
                    <%--CENTER--%>
                    <ext:Panel ID="_center" Region="Center" Title="Center" runat="server">
                        <Listeners>
                            <Swipe Fn="OnSwipe" />
                            <AfterLayout Handler="AfterLayout()" />
                        </Listeners>
                        <Items>
                            <ext:Label ID="_swipeLeft" Text="Swipe Left" runat="server" />
                            <ext:Label ID="_swipeRight" Text="Swipe Right" runat="server" />
                            <ext:Label ID="_swipeTop" Text="Swipe Top" runat="server" />
                            <ext:Label ID="_swipeBottom" Text="Swipe Bottom" runat="server" />
                        </Items>
                    </ext:Panel>
                    <%--SOUTH--%>
                    <ext:Panel ID="_south" Title="South" Region="South" Html="South Region" Height="200" Collapsible="true" Collapsed="true" AnimCollapse="true" runat="server" />
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
    Last edited by RCN; Mar 05, 2015 at 12:46 PM.

Posting Permissions