PDA

View Full Version : Swipe Example



RCN
Mar 05, 2015, 10:56 AM
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>