What's New?

[CLOSED] Border Layout + Accordion problems

  1. #1
    Aug 13, 2012, 12:39 PM

    [CLOSED] Border Layout + Accordion problems

    Hi, I'm creating an Accordion Layout inside a collapsed Border Layout region. The 'tabs' of the accordion layout don't pick up the heights of the VBox layouts when the border layout is opened as a 'floating' panel. See attached code + reproduction steps.

    • Run attached code, panel with accordion layout starts collapsed.
    • Click on the border region bar, not on the expand button, to open the panel in floating mode.
    • When switching accordion tabs the VBox layouts have empty height, except for the first (which was initially visible).

    Note that it works when using the expand button instead of floating the panel.

    Any idea how to fix this?

    <%@ Page language="C#" %>
<!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>Test Page</title>
</head>
<body>
    <form runat="server" id="wForm">
    <asp:ScriptManager runat="server" id="wScriptManager" />
    <ext:ResourceManager runat="server" id="wResourceManager" />
    <div>
        <ext:Viewport runat="server">
            <Items>
                <ext:BorderLayout runat="server">
                    <West collapsible="true" split="true">
                        <ext:Panel runat="server" layout="Accordion" title="Menu" collapsed="true" width="200">
                            <Items>
                                <ext:Panel runat="server" title="Category 1" layout="VBox">
                                    <Items>
                                        <ext:LinkButton runat="server" text="Link 1" />
                                        <ext:LinkButton runat="server" text="Link 2" />
                                        <ext:LinkButton runat="server" text="Link 3" />
                                    </Items>
                                </ext:Panel>
                                <ext:Panel runat="server" title="Category 2" layout="VBox">
                                    <Items>
                                        <ext:LinkButton runat="server" text="Link 1" />
                                        <ext:LinkButton runat="server" text="Link 2" />
                                        <ext:LinkButton runat="server" text="Link 3" />
                                    </Items>
                                </ext:Panel>
                                <ext:Panel runat="server" title="Category 3" layout="VBox">
                                    <Items>
                                        <ext:LinkButton runat="server" text="Link 1" />
                                        <ext:LinkButton runat="server" text="Link 2" />
                                        <ext:LinkButton runat="server" text="Link 3" />
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </West>
                    <Center>
                        <ext:Panel runat="server" title="Content" />
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
    Last edited by Daniil; Aug 15, 2012 at 2:55 PM. Reason: [CLOSED]
  2. #2
    Aug 13, 2012, 1:32 PM
    Hi,

    Sometimes VBoxLayout doesn't work well with initially hidden items.

    We would suggest to use AnchorLayout instead. Also you will need to set up
    StyleSpec="display:block;"
    for the LinkButtons.
  3. #3
    Aug 13, 2012, 1:50 PM
    Hm, thanks, that's a start, it does now display tabs 2 and 3 in floating mode. However it's still inconsistent between floating and expanding: when floating the accordion and selecting tabs 2 and 3 they are just as high as they need to be, but once I expand the border panel they take up the full range regardless of the content.

    I can set
    <LayoutConfig> <ext:AccordionLayoutConfig fill="false" /> </LayoutConfig>
    to make the expanded version behave like the floating version, it seems. That would be actually ok for my use-case, but out of curiosity, do you think fill=true could be made working with the floating panel, or would that be a problem in the Accordion Layout implementation?
  4. #4
    Aug 13, 2012, 2:20 PM
    Quote Originally Posted by syncos View Post
    would that be a problem in the Accordion Layout implementation?
    Probably. We will look into this issue.
  5. #5
    Aug 14, 2012, 8:21 AM
    I have found the problem.

    Please try the following fix for now. You can also return back VBoxLayout.

    I will consider it with my colleagues to include this fix into SVN.

    Fix
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
    Ext.override(Ext.layout.FitLayout, {
        onLayout: function (ct, target) {
            Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);

            if (!ct.collapsed || ct.isVisible()) {
                var sz;

                if (Ext.isIE6 && Ext.isStrict && target.dom == (Ext.net.ResourceMgr.getAspForm() || {}).dom) {
                    sz = Ext.getBody().getViewSize();
                } else {
                    sz = ((Ext.isIE6 && Ext.isStrict && target.dom == document.body) || target.dom == (Ext.net.ResourceMgr.getAspForm() || {}).dom) ? target.getViewSize() : target.getStyleSize();
                }

                this.setItemSize(this.activeItem || ct.items.itemAt(0), sz);
            }
        }
    });
</script>
    Last edited by Daniil; Aug 14, 2012 at 8:41 AM.
  6. #6
    Aug 14, 2012, 8:39 AM
    works great, thanks for the effort :-)
  7. #7
    Aug 15, 2012, 2:54 PM
    We have fixed it in SVN, revision #4266. Also it will be included in the next v1.6 release.

    Please note that the Ext.NET v1 sources are here now:
    http://svn.ext.net/premium/branches/1/

    Thanks for the question which led us to discover a defect.

Similar Threads

  1. border layout inside of tab
    By craig2005 in forum 1.x Help
    Replies: 1
    Last Post: Dec 31, 2010, 8:58 PM
  2. Border Layout not getting collapsed
    By vivekrane1986 in forum 1.x Help
    Replies: 0
    Last Post: Jun 05, 2010, 6:23 AM
  3. [CLOSED] Border Layout percentage
    By GmServizi in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 22, 2009, 7:51 AM
  4. [CLOSED] Need help with Border layout
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 29, 2009, 9:05 AM
  5. Border Layout
    By oskarni in forum 1.x Help
    Replies: 7
    Last Post: Apr 10, 2008, 9:19 PM

Tags for this Thread

Posting Permissions