[CLOSED] Changing background color of TabPanel on the fly

  1. #1

    [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]
  2. #2
    Hi,

    Please clarify would you like to change color of whole tab or only piece where a tab's title?
  3. #3
    I'd like to know how to do both. I am assuming that in order to change the individual tabs color I would need to create a custom gif for the "tabs-sprite-gif" file and then change the class on the fly similar to my example? In my example I am just trying to change the color of the tab-panel as I figured that would be the easier of the two.
  4. #4
    Here is an example for one of your requirements.
    Did I understand you properly?

    Example
    <%@ Page Language="C#" %>
    
    <%@ 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">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <style type="text/css">
            .myClass {
                background-color: Red !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TabPanel runat="server" Height="200">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Title="Tab" Html="Hello!" />
            </Items>
        </ext:TabPanel>
        <ext:Button runat="server" Text="Add color">
            <Listeners>
                <Click Handler="#{Panel1}.body.addClass('myClass');"/>
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Remove color">
            <Listeners>
                <Click Handler="#{Panel1}.body.removeClass('myClass');"/>
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  5. #5
    Not sure if this is relevant, but here's a quick video tutorial on changing the TabPanels header background color, see

    http://vimeo.com/10076549

    Last edited by geoffrey.mcgill; Oct 06, 2010 at 3:52 PM. Reason: embedded video
    Geoffrey McGill
    Founder & CEO
  6. #6
    Hi rmelancon,

    Here is an example how to change color of piece with tab's title.

    Example
    <%@ Page Language="C#" %>
    
    <%@ 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">
    <head runat="server">
        <title>Ext.Net Example</title>
        <style type="text/css">
            .myClassRed *, .myClassRed div.x-tab-left, .myClassRed div.x-tab-right {
                background-color: Red !important;
                background-image: none !important;
            }
            
            .myClassBlack *, .myClassBlack div.x-tab-left, .myClassBlack div.x-tab-right {
                background-color: black !important;
                background-image: none !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TabPanel ID="TabPanel1" runat="server" Height="200">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Title="Tab1" Html="Hello!" />
                <ext:Panel ID="Panel2" runat="server" Title="Tab2" Html="Hello!" />
            </Items>
        </ext:TabPanel>
        <ext:Button runat="server" Text="Add color to Tab1">
            <Listeners>
                <Click Handler="Ext.get(#{TabPanel1}.getTabEl(0)).addClass('myClassRed');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Remove color from Tab1">
            <Listeners>
                <Click Handler="Ext.get(#{TabPanel1}.getTabEl(0)).removeClass('myClassRed');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Add color to Tab2">
            <Listeners>
                <Click Handler="Ext.get(#{TabPanel1}.getTabEl(1)).addClass('myClassBlack');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Remove color from Tab2">
            <Listeners>
                <Click Handler="Ext.get(#{TabPanel1}.getTabEl(1)).removeClass('myClassBlack');" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  7. #7
    That's what I was trying to accomplish, thanks for the help.

Similar Threads

  1. Replies: 7
    Last Post: Jul 11, 2012, 1:12 PM
  2. [CLOSED] GridPanel.Rows.Changing Background Color of Rows
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 01, 2012, 5:18 PM
  3. [CLOSED] Changing the background color of htmleditor
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 18, 2012, 5:41 PM
  4. Replies: 1
    Last Post: Nov 24, 2011, 6:48 AM
  5. Changing TreePanel background color
    By wexman in forum 1.x Help
    Replies: 3
    Last Post: Apr 06, 2011, 2:35 PM

Tags for this Thread

Posting Permissions