[CLOSED] Change theme of Gridpanel when theme is changed

[pawangyanwali]

Hi,
When I change the theme of application, it changes them of all other components except windows. How do I change the theme of window as well. I have used following script in javascript like this.

var themeChange = function (menu, item, e, eOpts) {
    debugger;
    App.direct.GetThemeUrl(item.text, {
        success: function (result) {
            Ext.net.ResourceMgr.setTheme(result);
            var mainPanel = Ext.getCmp("pnlComp");
            mainPanel.items.each(function (el) {
                if (!Ext.isEmpty(el.iframe)) {
                    if (el.getBody().Ext) {
                        el.getBody().Ext.net.ResourceMgr.setTheme(result, item.text.toLowerCase());
                    }
                }
            });
            mainPanel.doLayout();
        }
    });
};

I tried to implement this as well. But it says ExampleTabs is undefined.

            ExampleTabs.items.each(function (el) {
                if (!Ext.isEmpty(el.iframe)) {
                    if (el.getBody().Ext) {
                        el.getBody().Ext.net.ResourceMgr.setTheme(result, menuItem.text.toLowerCase());
                    }
                }
            });

[RCN]

I think that you could use MessageBus to notify all Windows that the theme must be updated.

Please take a look on:

• https://examples2.ext.net/#/MessageBus/Basic/Simple/
• https://examples2.ext.net/#/MessageBus/Basic/Complex/

Let' me know if you need further assistance

[pawangyanwali]

I tried using this:

.Menu((@Html.X().Menu()
.Items(mi =>
{
mi.Add(Html.X().CheckMenuItem()
.Text("Gray")
.Group("theme")
);
mi.Add(Html.X().CheckMenuItem()
.Text("Access")
.Group("theme")
);
})
.Listeners(l =>
{
l.Click.Fn = "themeChange";
l.Click.BroadcastOnBus = "App.event";
})
))

I have implemented in another view where I have grid panel.

Html.X().GridPanel().ID("gridResult").MessageBusListeners(new MessageBusListener
                    {
                        Name = "App.*", 
                        Handler = "alert('test');"
                    }
                )

But it is not working. Can't I do it using javascript by getting each window of application and changing their themes while changing each items of that panel???

[Daniil]

Hi,

Generally, to change a Theme it is better to reload a page at all. For example, changing to the Neptune theme might not work via JavaScript.

Can't I do it using javascript by getting each window of application and changing their themes while changing each items of that panel???

It should work for the themes except the Neptune one.

We provided the two code snippets in the initial post. It is hard to say why it is not working without a full example.

Is this code executed?

el.getBody().Ext.net.ResourceMgr.setTheme(result, item.text.toLowerCase());

Regarding the second code snippet and "ExampleTabs is undefined". Well, do you have a container with "ExampleTabs" ID? If you have, you might need to prefix it with "App.", i.e. "App.ExampleTabs".

[pawangyanwali]

This is how my UI looks when I change theme to Access.


This is my View.

                                                                    .Menu((@Html.X().Menu()
                                                                    .Items(mi =>
                                                                               {
                                                                                   mi.Add(Html.X().CheckMenuItem()
                                                                                      .Text("Gray")
                                                                                      .Group("theme")

                                                                                      );
                                                                                   mi.Add(Html.X().CheckMenuItem()
                                                                                      .Text("Access")
                                                                                      .Group("theme")

                                                                                      );
                                                                                   
                                                                               })
                                                                               .Listeners(l =>
                                                                                              {
                                                                                                  l.Click.Fn = "themeChange";
                                                                                              })
                                                                    
                                                                    ))

This is my javascript.

var themeChange = function (menu, item, e, eOpts) {
    debugger;
    App.direct.GetThemeUrl(item.text, {
        success: function (result) {
            Ext.net.ResourceMgr.setTheme(result);
            var mainPanel = Ext.getCmp("pnlComp");
            mainPanel.items.each(function (el) {
                if (!Ext.isEmpty(el.iframe)) {
                    if (el.getBody().Ext) {
                        el.getBody().Ext.net.ResourceMgr.setTheme(result, item.text.toLowerCase());
                        
                    }
                }
            });
            mainPanel.doLayout();
        }
    });
};

[Daniil]

Please answer this question.

Is this code executed?

el.getBody().Ext.net.ResourceMgr.setTheme(result, item.text.toLowerCase());

Also I think you should replace

Ext.net.ResourceMgr.setTheme(result);

with

Ext.net.ResourceMgr.setTheme(result, item.text.toLowerCase());

What is the "mainPanel"? Please post the definition code.

[pawangyanwali]

@using Core.Framework.Common.Constants

@{
    ViewBag.Title = ViewBag.GetLabelText(ResourceLabelConstants.LBL_DESKTOP_TITLE_TEXT);
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section headtag
{
    <script language="javascript">
        function HandleResize(parmPanel, width, height) {  }
        function ShowMenuItems(button, callingPanelId, slidingPanelId, nodeid) {
            SlidePanel(callingPanelId, slidingPanelId, nodeid);
        }
        function HideMenuItems(button, callingPanelId, slidingPanelId, nodeid) {

            SlidePanelReverse(callingPanelId, slidingPanelId, nodeid);
        }

        var pnlComp = Ext.getCmp("pnlComp");
        if (pnlComp != null) {
            alert('item');
        }
       
    </script>
    <script>
        @Compensation.UI.Controllers.Base.BaseController.GenerateLocalizedStrings()
       
    </script>
    

}

@section content
{
@(Html.X().Viewport()
.Layout(LayoutType.Border)
.Border(false)
 
.ID("pnlComp")
.Listeners(l=>l.Resize.Handler = "HandleResize(this);")
 
.Items(i=>
           {
               i.Add(
                   (@Html.X().Panel()
                       .Region(Region.North)
                       .Height(100)
                       .Header(false)
                       .ContentFromPartial("HeaderPartial")
                   )
                   );
               i.Add(
                   (@Html.X().Panel()
                         .Region(Region.West)
                         .Layout(LayoutType.Fit)
                         .Width(200)
                         .Header(false)
                         .Collapsible(true)
                         .Split(true)
                         .CollapseMode(CollapseMode.Mini)
                         .Margins("0 0 4 4")
                         .Border(false)
                         .Items(items => items.Add(
                             (@Html.X().TreePanel()
                                   .ID("navTree")
                                   .RootVisible(true)
                                   .Header(false)
                                   .AutoScroll(true)
                                   .Lines(true)
                                   .UseArrows(false)
                                   .CollapseFirst(false)
                                   
                                   .Listeners(l =>
                                                  {
                                                      l.ItemClick.Handler = "onTreeItemClick(record,e);";
                                                      l.AfterRender.Fn = "onTreeAfterRender";
                                                  })
                                   .Store(
                                       Html.X().TreeStore()
                                       .ID("treeStoreNav")
                                           .Proxy(
                                               Html.X().AjaxProxy().Url(Url.Action("GetTreeNodes"))
                                           )
                                 )
                                 .TopBar(
                                 (@Html.X().Toolbar()
                                 .Items(t =>
                                            {
                                                t.Add(Html.X().TriggerField()
                                                        .EnableKeyEvents(true)
                                                        .Triggers(
                                                            Html.X().FieldTrigger().Icon(TriggerIcon.Clear)
                                                        )
                                                        .Listeners(l => {
                                                            l.KeyUp.Fn = "filterMainTree";
                                                            l.KeyUp.Buffer = 250;

                                                            l.TriggerClick.Fn = "clearMainFilter";
                                                        })
                                                    
                                                    );
                                                t.Add(
                                                    (@Html.X().Button()
                                                    .Icon(Icon.Cog)
                                                    .ToolTip("Options")
                                                    .Menu((@Html.X().Menu()
                                                    .Items(it =>
                                                               {
                                                                   it.Add(
                                                                       (@Html.X().MenuItem()
                                                                       .Text(ViewBag.GetLabelText(ResourceLabelConstants.LBL_EXPAND_ALL_TEXT))
                                                                       .IconCls("icon-expand-all")
                                                                       .Handler("this.up('treepanel').expandAll(false)")
                                                                       )
                                                                       );
                                                                   it.Add(
                                                                     (@Html.X().MenuItem()
                                                                     .Text(ViewBag.GetLabelText(ResourceLabelConstants.LBL_COLLAPSE_ALL))
                                                                     .IconCls("icon-collapse-all")
                                                                     .Handler("this.up('treepanel').collapseAll(false)")
                                                                     )
                                                                     );
                                                                   it.Add(
                                                                    (@Html.X().MenuSeparator())
                                                                    );
                                                                  
                                                                   it.Add(
                                                                  (@Html.X().CheckMenuItem()
                                                                  .Text(ViewBag.GetLabelText(ResourceLabelConstants.LBL_DEBUG_MODE_TEXT))
                                                                  .CheckHandler("filterNewExamples")
                                                                  ));
                                                                   it.Add(
                                                                   (@Html.X().MenuSeparator())
                                                                   );
                                                                   it.Add(
                                                                    (@Html.X().MenuItem()
                                                                    .Text(ViewBag.GetLabelText(ResourceLabelConstants.LBL_THEME_TEXT))
                                                                    .Icon(Icon.Paintcan)
                                                                    .Menu((@Html.X().Menu()
                                                                    .Items(mi =>
                                                                               {
                                                                                   mi.Add(Html.X().CheckMenuItem()
                                                                                       .Text(ViewBag.GetLabelText(ResourceLabelConstants.LBL_DEFAULT_THEME_TEXT))
                                                                                       .Group("theme")
                                                                                       .Checked(true)
                                                                                       );
                                                                                   mi.Add(Html.X().CheckMenuItem()
                                                                                      //.Text(ViewBag.GetLabelText(ResourceLabelConstants.LBL_GREY_THEME_TEXT))
                                                                                      .Text("Gray")
                                                                                      .Group("theme")

                                                                                      );
                                                                                   mi.Add(Html.X().CheckMenuItem()
                                                                                      .Text(ViewBag.GetLabelText(ResourceLabelConstants.LBL_ACCESS_THEME_TEXT))
                                                                                      .Group("theme")

                                                                                      );
                                                                                   
                                                                               })
                                                                               .Listeners(l =>
                                                                                              {
                                                                                                  l.Click.Fn = "themeChange";
                                                                                              })
                                                                    
                                                                    ))
                                                                    )
                                                                    );
                                                                   
                                                               })
                                                    ))
                                                    
                                                    
                                                    )
                                                    
                                                    );
                                            })
                                 )
                                 )
                                  .Root(
                Html.X().Node().NodeID("_root").Text("Root"))    

                             )

                                             ))));
                                   
                                  
                   
                   
               i.Add(
                   (@Html.X().Panel()
                       .Region(Region.Center)
                       .ID("pnlCenter")
                       .Header(false)
                       .Margins("4 4 4 4")
                       .Border(false)
                      .Layout(LayoutType.Fit)

                      .Items(it =>
                      {


                          {

                              var abstractComponents = Model as List<AbstractComponent>;
                              if (abstractComponents != null)
                              {

                                  it.AddRange(abstractComponents.ToArray());
                              }

                          }

                      }
      )
                       
                       //.ContentFromPartial("DesktopModule")
                   )
                   );
               i.Add(
                   
                           (Html.X().Toolbar()
                           .ID("toolbarWindows")
                           .Region(Region.South)
                           .Height(30)
                           .Border(true)
                      
                           .Margins("4 4 4 4")
                           )
                            
                   
                    
                   );



           }
           )
            )
   
}

[pawangyanwali]

This code is not working.

Ext.net.ResourceMgr.setTheme(result);

Actually I had already used that code. But I tried it again and it did not work.

var themeChange = function (menu, item, e, eOpts) {
    debugger;
    App.direct.GetThemeUrl(item.text, {
        success: function (result) {
            Ext.net.ResourceMgr.setTheme(result);
            var mainPanel = Ext.getCmp("pnlComp");
            mainPanel.items.each(function (el) {
                if (!Ext.isEmpty(el.iframe)) {
                    if (el.getBody().Ext) {
                        Ext.net.ResourceMgr.setTheme(result);
                        //el.getBody().Ext.net.ResourceMgr.setTheme(result, item.text.toLowerCase());
                    }
                }
            });
            mainPanel.doLayout();
        }
    });
};

[RCN]

It should work for the themes except the Neptune one.

I aggree with you Daniil.

---

The following example shows how to implement it using MessageBus:

View - Index1

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        var changeTheme = function (value) {
            Ext.net.ResourceMgr.setTheme(value);

            Ext.net.Bus.publish('Application.ChangeTheme', value);
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Panel Title="Local" Margin="10" Width="400" Height="300" runat="server">
        <Items>
            <ext:ComboBox runat="server">
                <Items>
                    <ext:ListItem Text="Default" />
                    <ext:ListItem Text="Gray" />
                </Items>
                <SelectedItems>
                    <ext:ListItem Index="0" />
                </SelectedItems>
                <Listeners>
                    <Select Handler="changeTheme(item.value);" />
                </Listeners>
            </ext:ComboBox>
        </Items>
    </ext:Panel>
    <ext:Panel TitleCollapse="true" Width="400" Height="300" Margin="10" runat="server">
        <Loader Url="/Example/Index2" Mode="Frame" runat="server">
        </Loader>
    </ext:Panel>
</body>
</html>

---

View - Index2

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Panel Title="Remote" Margin="10" runat="server">
        <Items>
            <ext:Button Text="Ext.Net 2" runat="server" />
        </Items>
        <MessageBusListeners>
            <ext:MessageBusListener Name="Application.ChangeTheme" Handler="Ext.net.ResourceMgr.setTheme(data); " />
        </MessageBusListeners>
    </ext:Panel>
</body>
</html>

---

Controller

public class ExampleController : System.Web.Mvc.Controller
{
    public ActionResult Index1()
    {
        return View();
    }

    public ActionResult Index2()
    {
        return View();
    }
}

[Daniil]

Pawan, I can't see "mainPanel" in your code.