Mar 04, 2015, 7:43 PM
Responsive Examples
I took a look on Sencha's documentation regarding ResponsiveConfig http://docs.sencha.com/extjs/5.0/5.0...sponsiveConfig, and i would like to share some samples:
Height: The height of the viewport.<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager Theme="Crisp" runat="server" />
<ext:Panel Html="Content" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="height <= 200">
<Config>
<ext:Panel Title="Height <= 200" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="height > 200">
<Config>
<ext:Panel Title="Height > 200" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Panel>
</body>
</html>Width: The width of the viewport.<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager Theme="Crisp" runat="server" />
<ext:Panel Html="Content" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="width <= 400">
<Config>
<ext:Panel Title="Width <= 400" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="width > 400">
<Config>
<ext:Panel Title="Width > 400" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Panel>
</body>
</html>Tall: True if width < height regardless of device type.Wide: True if width > height regardless of device type.<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager Theme="Crisp" runat="server" />
<ext:Panel Html="Content" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<Config>
<ext:Panel Title="Tall" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<Config>
<ext:Panel Title="Wide" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Panel>
</body>
</html>Landscape: True if the device orientation is landscape (always true on desktop devices).Portrait: True if the device orientation is portrait (always false on desktop devices).<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager Theme="Crisp" runat="server" />
<ext:Panel Html="Content" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="landscape">
<Config>
<ext:Panel Title="Landscape" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="portrait">
<Config>
<ext:Panel Title="Portrait" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Panel>
</body>
</html>Platform: An object containing various booleans describing the platform. (No documentation available).<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager Theme="Crisp" runat="server" />
<ext:Panel Html="Content" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="desktop">
<Config>
<ext:Panel Title="Desktop" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="phone">
<Config>
<ext:Panel Title="Phone" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="tablet">
<Config>
<ext:Panel Title="Tablet" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Panel>
</body>
</html>
Last edited by RCN; Mar 04, 2015 at 8:30 PM.
