Responsive Examples

  1. #1

    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.
  2. #2
    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>
  3. #3
    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>
  4. #4
    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>
  5. #5
    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>
    Last edited by RaphaelSaldanha; Oct 15, 2015 at 8:19 PM.
  6. #6
    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();
            }
        }
    }
    Last edited by RaphaelSaldanha; Dec 07, 2015 at 12:13 PM.

Similar Threads

  1. Replies: 9
    Last Post: Mar 04, 2015, 7:59 PM
  2. Replies: 2
    Last Post: Feb 26, 2015, 1:56 PM
  3. Replies: 7
    Last Post: Feb 20, 2015, 12:39 PM
  4. Replies: 3
    Last Post: Jun 26, 2012, 9:32 AM
  5. Replies: 7
    Last Post: Mar 22, 2012, 1:00 PM

Posting Permissions