[CLOSED] Treelist header alignment

  1. #1

    [CLOSED] Treelist header alignment

    Support,

    check out this example. notice the header with the three lines and "Menu" title isnt properly centered in Micro mode. When in micro, i expect to ONLY see the three lines.

    However, in the example, it tries to render the title also. Now change the Theme (in resource manager markup) to Triton and it works perfectly. Only triton works, all the others themes misalign it. Why? And can it be fixed?

    dont forget to change the fonts awesome path if needed.

    thanks,
    /Z

    <%@ Language="C#"  %>
    
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    
    
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
        <style type="text/css">
            .my-collapsible-panel .x-panel-header {
                cursor: pointer;
            }
    
    
            .treelist-background {
                background-color: #32404e;
            }
    
    
             /* START This is for the west menu tree nav so that it expands properly. limit this only to the tree nav so we put it here */
            .x-layer{
                width:unset !important;
            }
            .x-autocontainer-outerCt {
                width: auto !important;
            }
            /* END This is for the west menu tree nav so that it expands properly. limit this only to the tree nav so we put it here */
        </style>
    
    
        <script type="text/javascript">
    
    
            var menuExpanded = false;
         
            var handleMicroToggle = function (me) {
                var tl = App.LeftMenuLayout,
                    ct = tl.ownerCt;
                if (menuExpanded) {
                    tl.setMicro(menuExpanded);
                    tl.macroWidth = 24 * 2;
                    ct.setWidth(24 * 2);
                    menuExpanded = false;
                }
                else {
                    tl.setMicro(menuExpanded);
                    
                    tl.macroWidth = 200;
                    ct.setWidth(300);              
                    menuExpanded = true;
                }
            }
    
    
        </script>
    
    
            <%
            #region Set up font awesome if the current theme does not natively supports it.
            var manager = Ext.Net.ResourceManager.GetInstance(HttpContext.Current);
            var theme = manager.Theme;
            if (theme != Ext.Net.Theme.Triton && theme != Ext.Net.Theme.Graphite)
            {
        %>
        <link href="/ta/resources/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        <style type="text/css">
            /* wraps over the x-fa CSS class to match the reference from the Triton/Graphite themes */
            .x-fa {
              display: inline-block;
              font: normal normal normal 14px/1 FontAwesome;
              font-size: inherit;
              text-rendering: auto;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }
        </style>
        <%
            }
            #endregion Set up font awesome if the current theme does not natively supports it.
        %>
    </head>
    
    
    <body>
        <form runat="server" onsubmit="return false;">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Neptune">
                <Listeners>
                </Listeners>
            </ext:ResourceManager>
    
    
            <ext:Viewport ID="ViewPortMain" runat="server" Layout="BorderLayout">
                <Items>
    
    
                    <ext:Panel
                        runat="server"
                        Title="Menu"
                        ID="parentMenu"
                        IconCls="x-fa fa-navicon"
                        Region="West"
                        AutoScroll="true"
                        BodyCls="treelist-background"
                        Scrollable="Vertical"
                        Width="48" 
                        HeightSpec="100%"
                        MinWidth="48" 
                        MaxWidth="300">
                        <HeaderConfig>
                            <Listeners>
                                <Click Fn="handleMicroToggle" />
                            </Listeners>
                        </HeaderConfig>
                        <Items>
                            <ext:TreeList runat="server" ID="LeftMenuLayout" Micro="true" UIName="nav" Flex="1" HighlightPath="true" ExpanderOnly="false" ExpanderFirst="false">
                                <Store>
                                    <ext:TreeStore ID="TreeStore1" runat="server">
                                        <Listeners>
                                            <Load Handler="handleMicroToggle(this);" />
                                        </Listeners>
                                        <Root>
                                            <ext:Node Expanded="true" NodeID="MenuNodes">
                                                <Children>
                                                    <ext:Node
                                                        runat="server"
                                                        Text="Test"
                                                        IconCls="x-fa fa-clock-o">
                                                        <Children>
                                                            <ext:Node
                                                                runat="server"
                                                                Text="Test1"
                                                                IconCls="x-fa fa-calendar-check-o"
                                                                Leaf="true">
                                                            </ext:Node>
                                                            <ext:Node
                                                                runat="server"
                                                                Text="Test2"
                                                                IconCls="x-fa fa-plane"
                                                                Leaf="true">
                                                            </ext:Node>
                                                        </Children>
                                                    </ext:Node>
                                                </Children>
                                            </ext:Node>
                                        </Root>
                                    </ext:TreeStore>
                                </Store>
                            </ext:TreeList>
                        </Items>
                    </ext:Panel>
    
    
                    <ext:Container
                        runat="server"
                        ID="bodypanel"
                        Region="Center"
                        Scrollable="Vertical"
                        AutoScroll="true">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig ReserveScrollbar="true" />
                        </LayoutConfig>
                        <Items>
                            <ext:Label runat="server" Html="TEST" />
                        </Items>
                    </ext:Container>
    
    
    
    
    
    
                </Items>
            </ext:Viewport>
    
    
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Jan 02, 2019 at 4:05 AM.
  2. #2
    Hello @Z!

    Thanks for providing the test case and steps to reproduce the issue you're facing! I hope I got it right.

    The Panel component does not actually has a Micro setting and, in our example, as well as Ext JS original corresponding example, the inner "Panel" does not have a title at all -- so that one does not need to handle its contents/display when switching "micro".

    In fact, if you see in your code lines 44, 48 and 55, the panel (which in that context is ct) has its width changed explicitly to properly follow the inner components' Micro mode toggle.

    So, I believe it was just by chance that the icon title worked so right while using the Triton theme. For other themes, corresponding code should take place.

    In fact, if you just copy-paste the CSS rule from Triton, it seems to work nice:

    .x-panel-header-default-horizontal.x-header-noborder {
        padding: 12px 16px 12px 16px
    }
    But beware simply adding this CSS rule will be affecting any other panel header bars in the page. You may want to set this padding just to the specific panel's header by adding the following to your HeaderConfig in line 115:

    StyleSpec="padding:12px 16px 12px 16px"
    This would probably ensure that the menu glyph is displayed right regardless of theme, as font awesome is used as glyph and it is already being handled so that the same font awesome is available throughout all themes.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    thanks for a great answer. i went with StyleSpec in the HeaderConfig and it works great!
    /Z
  4. #4
    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] TreeList selection
    By Z in forum 4.x Premium Help
    Replies: 3
    Last Post: Jan 02, 2019, 4:06 AM
  2. [CLOSED] Filters header alignment
    By vmehta in forum 2.x Premium Help
    Replies: 5
    Last Post: Sep 25, 2014, 2:19 PM
  3. [CLOSED] Button Alignment in Panel Header
    By Tarun_Chand in forum 2.x Premium Help
    Replies: 10
    Last Post: Apr 09, 2013, 7:26 AM
  4. [CLOSED] Command Column alignment + header text not working
    By machinableed in forum 2.x Premium Help
    Replies: 1
    Last Post: Apr 10, 2012, 9:57 AM
  5. [CLOSED] GridPanel Column Header Alignment
    By ArcadisUS in forum 1.x Premium Help
    Replies: 3
    Last Post: Apr 08, 2011, 3:51 PM

Posting Permissions