[CLOSED] Visual error when hiding and showing panels in BorderLayout

  1. #1

    [CLOSED] Visual error when hiding and showing panels in BorderLayout

    I have a borderlayout with a button to show and hide the West and East region. If you try to hide/show the panels more than once, you get a visual error where the left panel still shows up even though it should be hidden.

    Steps:
    1. Press HideSideBar
    2. Press ShowSideBar
    3. Press HideSideBar again and notice the left panel is still visible in a collapsed state.

    Edit: this seems to happen with Slate theme. If I use the default theme, I get a different visual error on the right side. Added attachment

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
    
    
        <script type="text/javascript">
            var $c = function(id) {
                return Ext.getCmp(id);
    
    
            };
            function toggleView(btn) {
                if (btn.isHidingSidebars == null) {
                    btn.isHidingSidebars = true;
                }
    
    
                if (btn.isHidingSidebars) {
                    $c('tvBrowser').hide();
                    $c('pnlSections').hide();
                    $c('tvBrowser').collapse();
                    $c('pnlSections').collapse();
    
    
                    btn.setText('Show Sidebars');
    
    
                    btn.isHidingSidebars = false;
    
    
                } else {
                    $c('tvBrowser').show();
                    $c('pnlSections').show();
                    $c('tvBrowser').expand();
                    $c('pnlSections').expand();
    
    
                    btn.setText('Hide Sidebars');
    
    
                    btn.isHidingSidebars = true;
                }
            }
        </script>
    
    
        <ext:ResourceManager runat="server" Theme="Slate">
        </ext:ResourceManager>
        <ext:Viewport runat="server" ID="v" Layout="FitLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Layout="BorderLayout">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="btnSidebars" runat="server" Text="Hide Sidebars">
                                    <Listeners>
                                        <Click Fn="toggleView" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:Panel runat="server" ID="pnlSections" Layout="VBoxLayout" Region="West" Split="true"
                            Width="200" Margins="5 0 5 5" BodyBorder="false" AnimCollapse="false" Collapsible="false">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Panel runat="server" Title="Row Layout" ID="pnlRow" Flex="1">
                                </ext:Panel>
                                <ext:Panel runat="server" Title="Column Layout" ID="pnlCol" Flex="1">
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                        <ext:Panel runat="server" ID="tvBrowser" Region="East" Width="200" Margins="5 5 5 0"
                            Split="true" Title="Available Content" AnimCollapse="false" Collapsible="false">
                        </ext:Panel>
                        <ext:Container ID="Container1" runat="server" Region="Center" BodyBorder="false"
                            Layout="Fit" Margins="5 0 5 0">
                            <Items>
                                <ext:Panel runat="server" ID="pnlOutput">
                                    <TopBar>
                                        <ext:Toolbar runat="server" ID="tbParameters">
                                            <Items>
                                                <ext:ToolbarTextItem Text="Parameters: ">
                                                </ext:ToolbarTextItem>
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                </ext:Panel>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	2011-09-26 17h57_24.png 
Views:	87 
Size:	13.7 KB 
ID:	3256  
    Last edited by Daniil; Sep 27, 2011 at 1:41 PM. Reason: [CLOSED]
  2. #2
    Hi,

    To hide please use:
    $c('tvBrowser').hide();
    $c('pnlSections').hide();
    Panel1.doLayout();
    To show please use:
    $c('tvBrowser').show();
    $c('pnlSections').show();
    Panel1.doLayout();
    By the way, why do you access components using Ext.getCmp(), but don't access them directly? For example,
    tvBrowser.hide();
    pnlSections.hide();
    Panel1.doLayout();
  3. #3
    Thanks! DoLayout on the borderlayout did the trick. I had to use Ext.getCmp because I am using masterpage and all the IDs get a little funky. So I created a $c wrapper to do additional logic. Not ideal right now. This is legacy stuff before you guys added ability to preserve the IDs in INamingContainers
  4. #4
    Understand, thanks for the details.

Similar Threads

  1. [CLOSED] Problem hiding/showing controls
    By tlfdesarrollo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 29, 2012, 3:37 PM
  2. [CLOSED] Hiding/showing Tabpanel buggy
    By mirwais in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 14, 2012, 11:26 AM
  3. [CLOSED] Problems with layouts after hiding/showing
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jul 29, 2011, 3:53 AM
  4. Replies: 0
    Last Post: Mar 17, 2009, 5:30 PM
  5. Hiding and Showing up a TapPanel
    By pearl in forum 1.x Help
    Replies: 0
    Last Post: Mar 11, 2009, 8:27 AM

Posting Permissions