[CLOSED] Dynamic Theme

  1. #1

    [CLOSED] Dynamic Theme

    Hi,

    In my mvc application I'm trying to change theme dinamically at all windows, tabs,... opened.
    I have floatable windows that can have windows inside like the following example

    <ext:Viewport runat="server" Layout="Fit">
        <Content>
               //... Some content
        </Content>
         <Items>
               //... Some items
        </Items>
    </ext:Viewport>
    
    <ext:Window ID="OrdenCalculoWindow" runat="server" Icon="Report" Title="<%$ AppRecursos : sm_txt_ordenCalculoContadores %>"
        Width="550" Height="550" Hidden="true" Modal="true" CloseAction="Hide" Maximizable="true"
        Constrain="true">
        <AutoLoad Url='<%# this.Page.GetRouteUrl("Presencia", new { controller="ContadoresOrden", action="Index" }) %>'
            Method="GET" Mode="IFrame" TriggerEvent="show" ReloadOnEvent="true" ShowMask="true"
            AutoDataBind="true" MaskMsg="<%$ AppRecursos : sm_aviso_cargando||sm_txt_ordenCalculoContadores %>">
        </AutoLoad>
    </ext:Window>
    And I'm using JS function that seems like this:
    changeTheme: function (theme) {
            //HOME
            top.Ext.net.ResourceMgr.setTheme(theme);
    
            //TABS
            tpMain.items.each(function (tab) {
                if (!Ext.isEmpty(tab.iframe) && !Ext.isEmpty(tab.iframe.dom.contentWindow.Ext)) {
                    tab.iframe.dom.contentWindow.Ext.net.ResourceMgr.setTheme(theme);
    
                    //EMBEDDED WINDOWS
                    if (!Ext.isEmpty(tab.items)) {
                        tab.items.each(function (item) {
                            if (!Ext.isEmpty(item.getEl()) && !Ext.isEmpty(item.getEl().dom.contentWindow.Ext))
                                item.getEl().dom.contentWindow.Ext.net.ResourceMgr.setTheme(theme);
                        });
                    }
                }
            });
    
            //WINDOWS
            top.Ext.WindowMgr.each(function (win) {
                if (!Ext.isEmpty(win.iframe)) {
                    win.iframe.dom.contentWindow.Ext.net.ResourceMgr.setTheme(theme);
    
                    //EMBEDDED WINDOWS
                    if (!Ext.isEmpty(win.items)) {
                        win.items.each(function (item) {
                            if (!Ext.isEmpty(item.getEl()) && !Ext.isEmpty(item.getEl().dom.contentWindow.Ext))
                                item.getEl().dom.contentWindow.Ext.net.ResourceMgr.setTheme(theme);
                        });
                    }
                }
            });
        },
    But I fail with embedded windows inside a floatable window.
    How can I change the theme on it? Any idea?
    Last edited by Daniil; Jun 01, 2012 at 3:10 PM. Reason: [CLOSED]
  2. #2
    Hi,

    It can look:
    win.getBody().Ext.net.ResourceMgr.setTheme(theme)
    But, generally, changing theme requires a hard post back to be applied correctly.
  3. #3
    I'm doing a server call to change theme in resource manager too.

    But I don't want to lose all opened windows with it data and change it theme.
    I show you how it looks before and after apply your function instead of embedded windows part. Show like this:

    //HOME       
            top.Ext.net.ResourceMgr.setTheme(theme);
    
            //TABS    
            tpMain.items.each(function (tab) {
                    tab.getBody().Ext.net.ResourceMgr.setTheme(theme);
            });
    
            //WINDOWS     
            top.Ext.WindowMgr.each(function (win) {
                    win.getBody().Ext.net.ResourceMgr.setTheme(theme);
            });
    I attach the example to clarify my problem.
    Before: Click image for larger version. 

Name:	Before.png 
Views:	210 
Size:	57.5 KB 
ID:	4301
    After: Click image for larger version. 

Name:	After.png 
Views:	209 
Size:	61.6 KB 
ID:	4300
  4. #4
    Please investigate how we manage Theme changing in our Examples Explorer.
    https://examples1.ext.net/#/GridPane...Row_Selection/

    There is the following menu.

    Theme Menu
    <ext:Menu runat="server">
        <Items>
            <ext:CheckMenuItem ID="MenuItem1" runat="server" Text="Default" Group="theme" Checked="true" />
            <ext:CheckMenuItem ID="MenuItem2" runat="server" Text="Gray" Group="theme" />
            <ext:CheckMenuItem ID="MenuItem4" runat="server" Text="Slate" Group="theme" />
            <ext:CheckMenuItem ID="MenuItem3" runat="server" Text="Access" Group="theme" />
        </Items>
        <Listeners>
            <ItemClick Handler="X.GetThemeUrl(menuItem.text,{
                success : function (result) {
                    Ext.net.ResourceMgr.setTheme(result);
                    ExampleTabs.items.each(function (el) {
                        if (!Ext.isEmpty(el.iframe)) {
                            if (el.getBody().Ext) {
                                el.getBody().Ext.net.ResourceMgr.setTheme(result, menuItem.text.toLowerCase());
                            }
                        }
                    });
                }
            });" />
        </Listeners>
    </ext:Menu>
    GetThemeUrl DirectMethod
    [DirectMethod]
    public string GetThemeUrl(string theme)
    {
        Theme temp = (Theme)Enum.Parse(typeof(Theme), theme);
    
        this.Session["Ext.Net.Theme"] = temp;
    
        return temp == Ext.Net.Theme.Default ? "Default" : this.ResourceManager1.GetThemeUrl(temp);
    }
    It works for the main page and all its tabs with iframes.

    If you are sill in trouble to get it working, please provide a simplified example to reproduce.
  5. #5

    Test Example

    Hi again,

    I have been doing some tests and finally I create an example to reproduce my case.

    I hope not to forget anything.

    HOME PAGE WITH FLOATING WINDOW
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" MasterPageFile="~/Views/Shared/BaseMasterPage.Master" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ContentPlaceHolderID="HeadContent" runat="server">
        <script type="text/javascript">
            function changeTheme(theme, themeCode) {
                //HOME
                top.Ext.net.ResourceMgr.setTheme(theme);
    
                //TABS
    //            tpMain.items.each(function (tab) {
    //                if (!Ext.isEmpty(tab.iframe)) {
    //                    if (tab.getBody().Ext)
    //                        tab.getBody().Ext.net.ResourceMgr.setTheme(theme, themeCode.toLowerCase());
    //                }
    //            });
    
                //WINDOWS
                top.Ext.WindowMgr.each(function (win) {
                    if (!Ext.isEmpty(win.iframe)) {
                        if (win.getBody().Ext)
                            win.getBody().Ext.net.ResourceMgr.setTheme(theme, themeCode.toLowerCase());
                    }
                });
            }
        </script>
    </asp:Content>
    <asp:Content ContentPlaceHolderID="MainContent" runat="server">
        <ext:Viewport runat="server" Layout="FitLayout" AutoScroll="true">
            <Items>
                <ext:Toolbar>
                    <Items>
                        <ext:SplitButton runat="server" Text="Choose a Theme">
                            <Menu>
                                <ext:Menu runat="server">
                                    <Items>
                                        <ext:CheckMenuItem ID="MenuItem1" runat="server" Text="Default" Group="theme" Checked="true" />
                                        <ext:CheckMenuItem ID="MenuItem2" runat="server" Text="Gray" Group="theme" />
                                        <ext:CheckMenuItem ID="MenuItem4" runat="server" Text="Slate" Group="theme" />
                                        <ext:CheckMenuItem ID="MenuItem3" runat="server" Text="Access" Group="theme" />
                                    </Items>
                                    <Listeners>
                                        <ItemClick Handler="changeTheme('/extjs/resources/css/xtheme-' + menuItem.text.toLowerCase() + '-embedded-css/ext.axd', menuItem.text.toLowerCase());" />
                                    </Listeners>
                                </ext:Menu>
                            </Menu>
                        </ext:SplitButton>
                    </Items>
                </ext:Toolbar>
                
                <ext:Window runat="server" Width="150" Height="150" MinWidth="150" Title="Window"
                    Padding="5" Html="Sample text" Collapsible="true" X="530" Y="100">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Toolbar" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Buttons>
                        <ext:Button ID="Button1" runat="server" Text="Submit" Icon="Accept" />
                    </Buttons>
                </ext:Window>
    
                <ext:Window 
                    runat="server" 
                    Icon="Report" 
                    Title="Autoload Window"
                    Width="700" 
                    Height="600" 
                    Modal="false" 
                    CloseAction="Hide"
                    Maximizable="true"
                    Constrain="false">
                    <AutoLoad 
                        Url='<%# this.Page.GetRouteUrl("Test", new { controller="Sample", action="EmbeddedWindow" }) %>'
                        Method="GET" 
                        Mode="IFrame" 
                        TriggerEvent="show" 
                        ReloadOnEvent="true" 
                        ShowMask="true"
                        AutoDataBind="true"
                        MaskMsg="loading...">
                    </AutoLoad>
                </ext:Window>
            </Items>
        </ext:Viewport>
    </asp:Content>
    EMBEDDED WINDOW IN FLOATING WINDOW
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" MasterPageFile="~/Views/Shared/BaseMasterPage.Master" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ContentPlaceHolderID="MainContent" runat="server">
        <ext:Viewport runat="server" Layout="FitLayout" AutoScroll="true">
            <Items>
                <ext:Window 
                    runat="server" 
                    Icon="Report" 
                    Title="Autoload embedded Window"
                    Width="400" 
                    Height="400"
                    Modal="false" 
                    CloseAction="Hide"
                    Maximizable="true"
                    Constrain="false">
                    <AutoLoad 
                        Url='<%# this.Page.GetRouteUrl("Test", new { controller="Sample", action="Grid" }) %>'
                        Method="GET" 
                        Mode="IFrame" 
                        TriggerEvent="show" 
                        ReloadOnEvent="true" 
                        ShowMask="true"
                        AutoDataBind="true"
                        MaskMsg="loading...">
                    </AutoLoad>
                </ext:Window>
            </Items>
        </ext:Viewport>
    </asp:Content>
    BASE MASTER PAGE
    <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <head runat="server">
        <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="/resources/css/ui.css" />
        <ext:ResourcePlaceHolder runat="server" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
    </head>
    <body>
        <ext:ResourceManager ID="resManager" runat="server" IDMode="Explicit" ViewStateMode="Disabled" GZip="true" />
    
        <script type="text/javascript">
            function ResolveUrl(url) {
                var appPath = '<%= Request.ApplicationPath %>';
                if (appPath == "/")
                    return url;
                else
                    return '<%= Request.ApplicationPath %>' + url;
            }
        </script>
        <div>
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                <asp:HyperLink runat="server" Text="<br/><br/>Go to Sample" 
                    NavigateUrl="~/Test/Sample/Color">
                </asp:HyperLink>
            </asp:ContentPlaceHolder>
        </div>
    </body>
    </html>
    CONTROLLER
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace Controllers
    {
        public class SampleController : Controller
        {
            public ActionResult Color()
            {
                return View();
            }
    
            public ActionResult EmbeddedWindow()
            {
                return View();
            }
    
            public ActionResult Grid()
            {
                return View();
            }
        }
    }
    My example is based in mvc areas, AreaName for the example is 'Test'.
    For any problem with the example or anything I forget tell to me

    Thanks
  6. #6
    I would clarify that this is indifferent of changing resourceManager to apply theme in future request.
    I understand that my problem is set theme to opened windows, iframes,...
  7. #7
    Thanks for the example.

    Well, you have three levels of pages: top => iframe => iframe.

    So, it should look like this.

    Example
    function changeTheme (theme, themeCode) {
        Ext.net.ResourceMgr.setTheme(theme);
     
        Ext.WindowMgr.each(function (win) {
            if (!Ext.isEmpty(win.iframe)) {
                if (win.getBody().Ext) {
                    win.getBody().Ext.net.ResourceMgr.setTheme(theme, themeCode.toLowerCase());
                    win.getBody().Ext.WindowMgr.each(function (win) {
                        if (!Ext.isEmpty(win.iframe)) {
                            if (win.getBody().Ext) {
                                win.getBody().Ext.net.ResourceMgr.setTheme(theme, themeCode.toLowerCase());
                            }
                        }
                    });
                }
            }
        });
    }
  8. #8
    Thanks Daniil

Similar Threads

  1. [CLOSED] Dynamic Theme
    By gs_user in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 20, 2012, 7:44 AM
  2. Replies: 12
    Last Post: Sep 20, 2011, 2:33 PM
  3. [CLOSED] Create a dynamic event for dynamic components.
    By stoque in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: May 10, 2011, 9:16 PM
  4. Replies: 14
    Last Post: Feb 16, 2011, 1:38 PM
  5. Replies: 0
    Last Post: Jun 08, 2009, 11:33 PM

Tags for this Thread

Posting Permissions