PDA

View Full Version : Responsive Examples



RCN
Mar 04, 2015, 7:43 PM
I took a look on Sencha's documentation regarding ResponsiveConfig http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.mixin.Responsive-cfg-responsiveConfig, 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>

RCN
Mar 05, 2015, 10:32 PM
Set responsive config globally.


<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
Ext.Button.override({
plugins: [{
ptype: "responsive"
}],
responsiveConfig: {
"width <= 400": {
scale: "small"
},
"width > 400": {
scale: "large"
}
}
});
</script>
</head>
<body>
<ext:ResourceManager Theme="Crisp" runat="server" />
<ext:Viewport Layout="FitLayout" runat="server">
<Items>
<ext:Panel Region="Center" Title="Center" Html="Content" runat="server">
<Buttons>
<ext:Button Text="Ext.NET" runat="server" />
<ext:Button Text="Sencha" runat="server" />
<ext:Button Text=".NET" runat="server" />
</Buttons>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

RCN
Mar 12, 2015, 3:37 PM
Responsive Formulas


<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager Theme="Crisp" runat="server" />
<ext:Panel Width="200" Height="200" Border="true" Html="Content" runat="server">
<ResponsiveFormulas>
<ext:ResponsiveFormula Name="lowerOrEqual400" Formula="width <= 400" />
<ext:ResponsiveFormula Name="greaterThan400" Formula="width > 400" />
</ResponsiveFormulas>
<ResponsiveConfig>
<ext:ResponsiveRule Rule="lowerOrEqual400">
<Config>
<ext:Panel Title="Width <= 400" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="greaterThan400">
<Config>
<ext:Panel Title="Width > 400" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Panel>
</body>
</html>

bluenext
Sep 18, 2015, 1:28 PM
Hi!! i have a question for you: i try to reproduce your example for my app. As you can see, i want that behavior's panel with the ID=Toolbar change.
I want if I'm using a tablet the panel is collapsed, instead if i use a desktop the is not collapsed. Can you tell me why not function in this mode?? thank you very much!!!


<ext:Panel runat="server" ID="Toolbar" Region="West" Border="true">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="desktop">
<Config>
<ext:Panel Title="Desktop" runat="server" Width="300" Collapsible="true" Collapsed="false" CollapseMode="Mini" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="tablet">
<Config>
<ext:Panel Title="Tablet" runat="server" Width="100" Collapsible="true" Collapsed="true" CollapseMode="Mini" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
<Items>
<ext:Button ID="bottone1" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="desktop">
<Config>
<ext:Button runat="server" Scale="Large" Text="Gestione Risorse" Handler="alert('Sei nel desktop');"></ext:Button>
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="tablet">
<Config>
<ext:Button runat="server" Scale="Small" Text="Gest. Ris" ToolTip="Gestione Risorse" Handler="alert('Sei nel tablet');" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Button>

<ext:ToolbarSeparator ID="ToolbarSeparator1">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="desktop">
<Config>
<ext:ToolbarSeparator Height="5" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="tablet">
<Config>
<ext:ToolbarSeparator Height="1" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:ToolbarSeparator>

<ext:Button ID="bottone2" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="desktop">
<Config>
<ext:Button runat="server" Scale="Large" Text="Gestione Materiale" Handler="alert('Sei nel desktop');" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="tablet">
<Config>
<ext:Button runat="server" Scale="Small" Text="Gest. Mat" ToolTip="Gestione materiale" Handler="alert('Sei nel tablet');" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Button>
</Items>
</ext:Panel>

RaphaelSaldanha
Oct 15, 2015, 4:21 PM
It's possible to overcome the issue by doing the following:

Let me know if you need further assistance



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
Ext.Panel.override({
setCollapsed: function (collapsed) {
var item = this;
setTimeout(function () {
item[collapsed ? "collapse" : "expand"]();
}, 10);
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" Theme="Crisp" ScriptMode="Debug" />
<ext:Viewport Layout="BorderLayout" Border="false" runat="server">
<Items>
<%--Center--%>
<ext:Panel Region="Center" Title="Center" Html="Center Region" runat="server" />
<%--East--%>
<ext:Panel ID="_east" Region="East" Html="East Region" runat="server" Width="400" Collapsible="true" Split="true" Floatable="true" AnimCollapse="false">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="desktop">
<Config>
<ext:Panel Title="Desktop" Collapsed="false" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="phone">
<Config>
<ext:Panel Title="Phone" Collapsed="true" runat="server" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="tablet">
<Config>
<ext:Panel Title="Tablet" Collapsed="true" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

RaphaelSaldanha
Dec 07, 2015, 12:04 PM
Define ResourceManager's theme accordingly to device type.


Desktop: Crisp
Tablet or Phone: CrispTouch



<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager Theme='<%# ViewBag.Theme %>' AutoDataBind="true" runat="server" />
<ext:Button Text="Ext.NET" runat="server" />
</body>
</html>



namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
ViewBag.Theme = RequestManager.IsDesktop ? Theme.Crisp : Theme.CrispTouch;

return View();
}
}
}