PDA

View Full Version : [CLOSED] How to change themes in code behind.



GGage
Jan 29, 2013, 5:21 PM
Hi

I'm new to ExtJS and Ext.Net and one of the first things I am trying to learn is how to switch to another theme.

This is the code I am trying to use:


<ext:ComboBox ID="cbStyleSwitcher" runat="server" SelectedIndex="0">
<Items>
<ext:ListItem Text="Blue Theme" Value="Default" />
<ext:ListItem Text="Gray Theme" Value="Gray" />
<ext:ListItem Text="Accessibility Theme" Value="Access" />
</Items>
<DirectEvents>
<Select OnEvent="changeStyle" />
</DirectEvents>
</ext:ComboBox>

and in codebehind


protected void changeStyle(object sender, DirectEventArgs e)
{
string cSelectedTheme = "";
cSelectedTheme = cbStyleSwitcher.SelectedItem.Value;
if (cSelectedTheme == "Gray") ResourceManager1.Theme = Ext.Net.Theme.Gray;
if (cSelectedTheme == "Access") ResourceManager1.Theme = Ext.Net.Theme.Access;
if (cSelectedTheme == "Default") ResourceManager1.Theme = Ext.Net.Theme.Default;
} // eof -- changeStyle

This code excutes without an error, but no change to the webform. How to i get the page to refresh and display the new theme ?


thanks

George

Baidaly
Jan 29, 2013, 11:05 PM
Hello!

Welcome to our forum!

Please, use the CODE tag: http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics

According your problem. Take a look at the following example:



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
cbStyleSwitcher.SelectedItems.Add(new Ext.Net.ListItem(this.Session["Ext.Net.Theme"]));
}

protected void changeStyle(object sender, DirectEventArgs e)
{
string cSelectedTheme = cbStyleSwitcher.SelectedItem.Value;
var theme = (Theme)Enum.Parse(typeof(Theme), cSelectedTheme);
this.Session["Ext.Net.Theme"] = theme;
ResourceManager1.SetTheme(theme);
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form runat="server">
<ext:ComboBox ID="cbStyleSwitcher" runat="server">
<Items>
<ext:ListItem Text="Blue Theme" Value="Default" />
<ext:ListItem Text="Gray Theme" Value="Gray" />
<ext:ListItem Text="Accessibility Theme" Value="Access" />
</Items>
<DirectEvents>
<Select OnEvent="changeStyle" />
</DirectEvents>
</ext:ComboBox>
</form>
</body>
</html>

GGage
Jan 29, 2013, 11:31 PM
Thank you

Works great!

George

Daniil
Jan 30, 2013, 5:28 AM
Hi everybody,

Please note that a doLayout call can be required after changing a Theme.

For example, open:
http://examples2.ext.net/

Change Theme to Access.

You can see how the Home tab looks.

Running this code in the console helps.

Ext.ComponentQuery.query("viewport")[0].doLayout()

P.S. We will apply it soon for our Examples Explorers.

redi
Apr 03, 2014, 5:06 AM
Test Posting