[CLOSED] set theme dynamically

  1. #1

    [CLOSED] set theme dynamically

    I have a default theme set in web.config

    I want to change it in two cases

    1. as soon as the Login screen is reached, a popup if and only if a tablet is detected so they can choose a touch friendly theme
    2. in their user profile, to choose a theme they want and have it reflect immediately and on all future logins.

    I found some good ext.net v2 examples but i cannot find resourceManager.setTheme in ext.net v4.

    pls assist.
    thanks,
    /Z
    Last edited by fabricio.murta; Jan 09, 2018 at 6:10 PM.
  2. #2
    Hello @Z!

    Here's how Ext.NET Example handles themes.

    As it no longer themes the outside/frame with the inside, it sets a session variable that is used while loading the examples.

    Well, this is how Ext.NET Examples changes the current theme: https://github.com/extnet/Ext.NET.Ex...t.aspx#L63-L73

    This simple page will cycle thru some of the themes as you click the button. For the theme to actually affect the page you have to refresh the page.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public static int curTheme = 0;
        public void BtnClick(object sender, DirectEventArgs e)
        {
            string[] themes =
            {
                "Neptune", "Crisp", "CrispTouch", "Gray", "Triton", "Aria"
            };
    
            curTheme = ++curTheme % themes.Count();
            this.Session["Ext.Net.Theme"] = (Theme)Enum.Parse(typeof(Theme), themes[curTheme]);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Template - Ext.NET Examples</title>
    
        <script>
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            Refresh the page after clicking the button below for it to show up. (will cycle thru chosen themes).
            <ext:Button runat="server" Text="click" OnDirectClick="BtnClick" />
            <ext:Window runat="server" Title="Window" Html="Simple window." />
        </form>
    </body>
    </html>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    got it.

    Can you please explain why my DirectMethod is not called in this case?

    <%@ Language="C#"  %>
    
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    <html  lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Test</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
    
    
        <script runat="server">
            public static int curTheme = 0;
            public void BtnClick(object sender, DirectEventArgs e)
            {
                X.Msg.Alert("TEST", "TEST");
                string[] themes =
                {
                    "Neptune", "Crisp", "CrispTouch", "Gray", "Triton", "Aria"
                };
    
    
                curTheme = ++curTheme % themes.Count();
                this.Session["Ext.Net.Theme"] = (Theme)Enum.Parse(typeof(Theme), themes[curTheme]);
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" >
        </ext:ResourceManager>
        
        <ext:ViewPort ID="ViewPort1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Toolbar 
                    runat="server" 
                    Region="North" 
                    >
                    <Items>
                        <ext:Button ID="Button1" 
                            runat="server" 
                            Icon="StatusOnline" 
                            Text='Test' >
                            <Menu>
                                <ext:Menu ID="Menu1" runat="server">
                                    <Items>
                                        <ext:MenuItem Text="Options" Icon="Wrench">
                                            <Menu>
                                                <ext:Menu ID="Menu2" runat="server">
                                                    <Items>
                                                        <ext:MenuItem Text="Choose a Theme...">
                                                            <Menu>
                                                                <ext:Menu ID="Menu3" runat="server">
                                                                    <Items>
                                                                        <ext:MenuItem Text="Default" OnDirectClick="BtnClick">
                                                                        </ext:MenuItem>
                                                                    </Items>
                                                                </ext:Menu>
                                                            </Menu>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:MenuItem>
                                    </Items>
                                </ext:Menu>
                            </Menu>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>                    
                <ext:TabPanel 
                    ID="tpMain" 
                    runat="server" 
                    Region="Center" 
                    CloseAction="Destroy">
                    <Items>
                        <ext:Panel 
                            ID="TabPrimary" 
                            runat="server" 
                            Title="Home" 
                            Icon="ApplicationForm" 
                            Border="false">
                        </ext:Panel>                        
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:ViewPort>
        
    </body>
    </html>
    thanks
    /Z
  4. #4
    Hello @Z!

    Your direct event is triggered. You're probably missing the window message, right?.. You forgot to add .Show() call to the end of the line 20 in your code. In other words, should use X.Msg.Alert("TEST", "TEST").Show();.

    A good, simpler, alternative to Alert() would be to just X.Toast("TEST"); instead.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Oh, forgot to mention! Look at this example in EE, it dynamically switches themes.

    https://examples4.ext.net/#/Getting_...nent_Overview/

    Hope this (and the answer above) helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    thanks.
    got it working
    /Z
  7. #7
    Hello @Z!

    Thanks for the feedback! Hope we could help!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Oct 22, 2015, 8:05 AM
  2. Replies: 9
    Last Post: Sep 25, 2015, 8:42 AM
  3. [CLOSED] Change theme of Gridpanel when theme is changed
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: May 22, 2013, 8:05 AM
  4. Replies: 2
    Last Post: Nov 23, 2011, 1:02 AM
  5. Replies: 0
    Last Post: Jun 08, 2009, 11:33 PM

Posting Permissions