What's New?

[CLOSED] Panel Header CLS

  1. #1
    Oct 25, 2017, 9:26 AM

    [CLOSED] Panel Header CLS

    Hello,

    I want to set a CLS class for panels to set font-size and color. I used this css class :.x-tab-inner-default but this apply to all panels. I want to use it in specific panels so if I use the Cls property of the panel and modify the style tag like this:" .Panels .x-tab-inner-default" it doesn't work. Please you can review the example below:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <style type="text/css">

        /* this work for all tabs */
         .x-tab-inner-default {
        color: #333;
        font-size: medium; 
     }

         /* this is not working 
        .Panels .x-tab-inner-default {
        color: #333;
        font-size: medium; 
     }
*/

    </style>

</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" ID="ResourceManager1" >

        </ext:ResourceManager>

         <ext:Viewport runat="server" ID="VP1" RTL="true" Layout="BorderLayout" >
            <Items>
                 <ext:TabPanel runat="server" Region="Center">
                     
            <Items>
               
                <ext:Panel runat="server" Title='Tab1'  Cls="Panels"/>

                <ext:Panel runat="server" Title='Tab2'>
                </ext:Panel>
                <ext:Panel runat="server" Title='Tab3'>
                </ext:Panel>
               <ext:Panel runat="server" Title='Tab4'>
                </ext:Panel>
                <ext:Panel runat="server" Title='Tab5'>
                </ext:Panel>
                <ext:Panel runat="server" Title='Tab6' Cls="Panels">
                </ext:Panel>
            </Items>
        </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

    Thank you
    Last edited by fabricio.murta; Dec 26, 2017 at 2:55 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Oct 25, 2017, 5:01 PM
    Hello @geovision!

    You want to give the CSS class to the tab strip on those specific tabs, not to the panels -- because all that the tab strip gets from the panels is the title. So styling the panels won't help and that's the expected behavior.

    But now, if you set the style to the tab through the TabConfig withing the panels, then your CSS selector will work just fine. Take a look:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>62164 - Setting Cls to Specific Tabs</title>
    <style type="text/css">
        .Panels .x-tab-inner-default {
            color: #333;
            font-size: medium; 
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" ID="ResourceManager1" />

    <ext:Viewport runat="server" ID="VP1" RTL="true" Layout="BorderLayout" >
        <Items>
            <ext:TabPanel runat="server" Region="Center">
                <Items>
                    <ext:Panel runat="server" Title='Tab1'  Html="Pnl1">
                        <TabConfig runat="server" Cls="Panels" />
                    </ext:Panel>

                    <ext:Panel runat="server" Title='Tab2' Html="Pnl2" />
                    <ext:Panel runat="server" Title='Tab3' Html="Pnl3" />
                    <ext:Panel runat="server" Title='Tab4' Html="Pnl4" />
                    <ext:Panel runat="server" Title='Tab5' Html="Pnl5" />

                    <ext:Panel runat="server" Title='Tab6' Html="Pnl6">
                        <TabConfig runat="server" Cls="Panels" />
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Oct 26, 2017, 6:16 AM
    Thank you, it worked, but is there anyway to set it using javascript? dynamically?? I tried this: "App.PanelID.tabConfig.cls='Panels'"
    but it is not working, I want to change the cls dynamically using javascript.

    Regards
  4. #4
    Oct 31, 2017, 4:10 PM
    Hello @Geovision!

    Sorry for the long delay replying your following inquiry! Once you rendered the tab there's little use to update the tab config, unless you are going to remove and re-render it, which I doubt is the case.

    At that point you have from the panel the tab handle, which gives you access to the tab itself, where you can add and remove CSS classes and styles dynamically.

    Here's your test case adjusted, with a button to toggle the class in tab 3. For easier understanding, I've added an ID to every panel and to the tab panel itself.

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>62164 - Setting Cls to Specific Tabs</title>
    <style type="text/css">
        .Panels .x-tab-inner-default {
            color: #333;
            font-size: medium; 
        }
    </style>
    <script type="text/javascript">
        var toggleTabHighlight = function (panel) {
            if (panel.tab) {
                Ext.toast("Toggling tab highlight for " + panel.title);

                if (panel.tab.hasCls("Panels")) {
                    panel.tab.removeCls("Panels");
                } else {
                    panel.tab.addCls("Panels");
                }
            } else {
                Ext.toast("Panel '" + panel.title + "' (" + panel.id + ") is not within a tab panel.");
            }
            

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" ID="ResourceManager1" />

    <ext:Viewport runat="server" ID="VP1" RTL="true" Layout="BorderLayout" >
        <Items>
            <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Toggle Tab3" Handler="toggleTabHighlight(#{Panel3});" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Title='Tab1'  Html="Pnl1">
                        <TabConfig runat="server" Cls="Panels" />
                    </ext:Panel>

                    <ext:Panel ID="Panel2" runat="server" Title='Tab2' Html="Pnl2" />
                    <ext:Panel ID="Panel3" runat="server" Title='Tab3' Html="Pnl3" />
                    <ext:Panel ID="Panel4" runat="server" Title='Tab4' Html="Pnl4" />
                    <ext:Panel ID="Panel5" runat="server" Title='Tab5' Html="Pnl5" />

                    <ext:Panel ID="Panel6" runat="server" Title='Tab6' Html="Pnl6">
                        <TabConfig runat="server" Cls="Panels" />
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    I hope this makes up for the delayed reply! :)
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Dec 02, 2017, 12:38 AM
    Hello @geovision!

    It's been a while since we last replied here, and still no feedback from you. Do you still need help here? We'll mark this as closed if you do not reply in 7+ days from now (still ok to post afterwards).
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. Grid Panel header
    By ghada in forum 4.x Help
    Replies: 3
    Last Post: Oct 25, 2017, 5:20 PM
  2. tab panel header color
    By sharmav1 in forum 1.x Help
    Replies: 9
    Last Post: Nov 04, 2014, 7:05 AM
  3. Question about panel header
    By feanor91 in forum 2.x Help
    Replies: 1
    Last Post: May 29, 2013, 12:43 PM
  4. Header Group in Grid Panel
    By Rakeshkumar.a in forum 1.x Help
    Replies: 1
    Last Post: Dec 21, 2010, 9:59 AM
  5. Add buttons into panel header.
    By flaviodamaia in forum 1.x Help
    Replies: 2
    Last Post: Nov 23, 2010, 5:22 PM

Posting Permissions