-
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.
Code:
<!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.
Code:
<!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.
Code:
<!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).
Code:
<!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).
Code:
<!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>
-
Set responsive config globally.
Code:
<!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>
-
Responsive Formulas
Code:
<!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>
-
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!!!
HTML Code:
<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>
-
It's possible to overcome the issue by doing the following:
Let me know if you need further assistance
Code:
<!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>
-
Define ResourceManager's theme accordingly to device type.
- Desktop: Crisp
- Tablet or Phone: CrispTouch
Code:
<!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>
Code:
namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
ViewBag.Theme = RequestManager.IsDesktop ? Theme.Crisp : Theme.CrispTouch;
return View();
}
}
}
