Oct 06, 2010, 1:33 PM
[CLOSED] Changing background color of TabPanel on the fly
I found an older example using the old toolkit and attempted to convert it to the new toolkit but it doesn't work. I'm trying to change the background color of a tab panel based on some condition, ie - change it on the fly. The example I found added or removed class definitions in a handler. I tried a couple different ways, hence the 4 buttons, none seemed to do anything, here's the code:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="rlmtest2.aspx.vb" Inherits="WAP.Web.Advisor.rlmtest2" %>
<!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">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.x-tab-strip-top .x-highlight-tab .x-tab-right, .x-tab-strip-top .x-highlight-tab .x-tab-left, .x-tab-strip-top .x-highlight-tab .x-tab-strip-inner{
background-color: red;
}
.ul.x-tab-strip-top {
background-color:red;
background-image:none;
border-bottom-color:#8DB2E3;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<div>
<ext:TabPanel ID="TabPanel1" runat="server">
<Items>
<ext:Panel ID="Tab1" runat="server" Title="Default color">
</ext:Panel>
<ext:Panel ID="Tab2" runat="server" Title="Other color">
</ext:Panel>
</Items>
<Listeners>
<Render Handler="#{TabPanel1}.addClass('ul.x-tab-strip-top');" />
</Listeners>
</ext:TabPanel>
<ext:Button ID="Button1" runat="server" Text="Remove hightlight">
<Listeners>
<Click Handler="#{TabPanel1}.removeClass('ul.x-tab-strip-top');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Add hightlight">
<Listeners>
<Click Handler="#{TabPanel1}.addClass('ul.x-tab-strip-top');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Remove hightlight">
<Listeners>
<Click Handler="#{TabPanel1}.removeClass('x-tab-strip-top');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button4" runat="server" Text="Add hightlight">
<Listeners>
<Click Handler="#{TabPanel1}.addClass('x-tab-strip-top');" />
</Listeners>
</ext:Button>
</div>
</form>
</body>
</html>
Last edited by Daniil; Oct 07, 2010 at 12:26 PM.
Reason: [CLOSED]