What's New?

[CLOSED] BorderLayout and resizing

  1. #1
    Nov 25, 2009, 6:50 AM

    [CLOSED] BorderLayout and resizing

    Hello,

    We have been using borderlayouts to seperate our pages for quite some time, however today we ecountered a resizing issue.

    This occurs when a page, on which a borderlayout is used, is resized while it's not the active page.

    We use a tabpanel, and each tab contains a borderlayout. In most cases, we only make use of west and center.

    For example, on one page we have 4 different tabs. Resizing the page won't matter for the active tab. On all other (previously loaded) tabs, the west panel will have vanished, and only the center panel is visible.

    Below is our customer details tab, one of the four tabs on which we encountered this problem.
    <ext:FitLayout runat="server">
    <ext:Panel runat="server" Border="false" AutoScroll="true" Header="false">
        <Body>
        
            <ext:BorderLayout runat="server">

                <West Collapsible="false" Split="false">
                    <ext:Panel runat="server" Width="320" Border="false" Cls="content-panel-header" AutoHeight="true">
                        <Body>
                            <ext:Panel ID="PanelPersonal" runat="server" Frame="true" Title="Gegevens contact persoon" Width="310" Height="310">
                                <Body>  
                                    <ext:FitLayout runat="server">
                                        <ext:Panel ID="PersonalPanel" runat="server" Border="false" BodyStyle="padding:5px;">
                                            <Body>
                                                <ext:FitLayout runat="server">
                                                    <ext:FormPanel ID="PersonalFormPanel" Border="false" Url="/UserControl/Offer/SavePersonDetailsToSession/" runat="server" BodyStyle="background: none;">
                                                        <Body>
                                                            <ext:FormLayout ID="PDFormLayout" runat="server" LabelWidth="105">
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldFirstName" runat="server" Width="175" MaxLength="24" ReadOnly="false" AllowBlank="false" MsgTarget="Qtip" DataIndex="FirstName" meta:resourcekey="FirstName" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldLastName" runat="server" Width="175" MaxLength="24" ReadOnly="false" AllowBlank="false" MsgTarget="Qtip" DataIndex="LastName" meta:resourcekey="LastName" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldStreet" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" MaxLength="24" DataIndex="Street" meta:resourcekey="Street"/>
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldHouseNumber" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" MaxLength="24" DataIndex="HouseNumber" meta:resourcekey="HouseNumber" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldZipcode" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" MaxLength="24"  DataIndex="Zipcode" meta:resourcekey="Zipcode" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldCity" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" MaxLength="24" DataIndex="City" meta:resourcekey="City" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:ComboBox ID="PDComboBoxCountry" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" Mode="Default"
                                                                                  DataIndex="CountryId" ReadOnly="true" StoreID="CountryStore" DisplayField="Name" ValueField="Id" meta:resourcekey="Country">
                                                                    </ext:ComboBox>
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldPhoneNumber" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" MaxLength="24" DataIndex="PhoneNumber" meta:resourcekey="PhoneNumber" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldMobileNumber" runat="server" Width="175" AllowBlank="true" MsgTarget="Qtip" MaxLength="24" DataIndex="MobileNumber" meta:resourcekey="MobileNumber" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="PDTextFieldEmail" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" MaxLength="40" DataIndex="EmailAddress" meta:resourcekey="EmailAddress" />
                                                                </ext:Anchor>
                                                            </ext:FormLayout>
                                                        </Body>
                                                    </ext:FormPanel>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>    
                                    </ext:FitLayout>      
                                </Body>
                            </ext:Panel>
                        </Body>
                    </ext:Panel>
                </West>
                
                <Center>
                    <ext:Panel runat="server" Border="false" Cls="content-panel-header" AutoHeight="true">
                        <Body>
                            <ext:Panel ID="PanelCompany" runat="server" Frame="true" Title="Gegevens bedrijf" Width="310" Height="310">
                                <Body>
                                    <ext:FitLayout runat="server">    
                                        <ext:Panel ID="CompanyPanel" runat="server" Border="false" BodyStyle="padding:5px;" Width="365">
                                            <Body>
                                                <ext:FitLayout runat="server">
                                                    <ext:FormPanel ID="CompanyFormPanel" runat="server" Border="false" Url="/UserControl/Offer/SaveCompanyDetailsToSession/">
                                                        <Body>
                                                            <ext:FormLayout ID="CDFormLayout" runat="server" LabelWidth="105">
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="CDTextFieldBusinessName" runat="server" AllowBlank="false" MsgTarget="Qtip" Width="175" MaxLength="24" DataIndex="Name" meta:resourcekey="Company" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="CDTextFieldStreet" runat="server" AllowBlank="false" MsgTarget="Qtip" Width="175" MaxLength="24" DataIndex="Street" meta:resourcekey="Street" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="CDTextFieldHouseNumber" runat="server" AllowBlank="false" MsgTarget="Qtip" Width="175" MaxLength="24" DataIndex="HouseNumber" meta:resourcekey="HouseNumber" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="CDTextFieldZipcode" runat="server" AllowBlank="false" MsgTarget="Qtip" Width="175" MaxLength="24" DataIndex="Zipcode" meta:resourcekey="Zipcode" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="CDTextFieldCity" runat="server" AllowBlank="false" MsgTarget="Qtip" Width="175" MaxLength="24" DataIndex="City" meta:resourcekey="City" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:ComboBox ID="CDComboBoxCountry" runat="server" Width="175" AllowBlank="false" MsgTarget="Qtip" Mode="Default" 
                                                                                  DataIndex="CountryId" ReadOnly="true" StoreID="CountryStore" DisplayField="Name" ValueField="Id" meta:resourcekey="Country">
                                                                    </ext:ComboBox>
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="CDTextFieldPhoneNumber" runat="server" AllowBlank="false" MsgTarget="Qtip" MaxLength="24" Width="175" DataIndex="PhoneNumber" meta:resourcekey="PhoneNumber" />
                                                                </ext:Anchor>
                                                                <ext:Anchor>
                                                                    <ext:TextField ID="CDTextFieldEmail" runat="server" AllowBlank="false" MsgTarget="Qtip" MaxLength="24" Width="175" DataIndex="EmailAddress" meta:resourcekey="EmailAddress" />
                                                                </ext:Anchor>
                                                            </ext:FormLayout>
                                                        </Body>
                                                    </ext:FormPanel>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:FitLayout> 
                                </Body>                                                            
                            </ext:Panel>
                        </Body>
                    </ext:Panel>
                </Center>    
            </ext:BorderLayout>
        
        </Body>
    </ext:Panel>
</ext:FitLayout>
    Thanks in advance for your time,
    Riset
  2. #2
    Nov 25, 2009, 8:10 AM

    RE: [CLOSED] BorderLayout and resizing

    Hi,

    I am not sure that clear understood what happens because I need test sample for investigate issue at runtime (just try to narrow code and create simple example)

    I can see the following incorrect things which can produce that issue:

    1. You can't use AutoScroll="true" for container with border layout (first panel in your code) because border layout always occupies whole container body

    2. If you place controls inside Body instead any layout such controls don't manage by parent container therefore it can't resize/relayout when parent container changes. Therefore it is better to place controls inside layout

    Change the following code
     <ext:Panel runat="server" Width="320" Border="false" Cls="content-panel-header" AutoHeight="true">
  <Body>
      <ext:Panel ID="PanelPersonal" runat="server" Frame="true" Title="Gegevens contact persoon" Width="310" Height="310"
    by

    
 <ext:Panel runat="server" Width="320" Border="false" Cls="content-panel-header">
  <Body>
      <ext:FitLayout runat="server">
           <ext:Panel ID="PanelPersonal" runat="server" Frame="true" Title="Gegevens contact persoon" Width="310" Height="310"
    Please note that I removed AutoHeight="true" because it is not used with FitLayout



  3. #3
    Nov 25, 2009, 8:56 AM

    RE: [CLOSED] BorderLayout and resizing

    vladimir (11/25/2009)Hi,

    I am not sure that clear understood what happens because I need test sample for investigate issue at runtime (just try to narrow code and create simple example)

    Hello and thank you for the swift reply.

    I have written a small sample which you can use to reproduce the issue, see below:

    <ext:ViewPort runat="server" ID="TestViewPort">
        <Body>
            <ext:FitLayout runat="server">
                <ext:Panel runat="server" ID="Test_Encapsulating_Panel" Border="false" Title="Test" BodyStyle="padding:10px;">
                    <Body>
                        <ext:FitLayout runat="server">
                        <ext:TabPanel runat="server" ID="BLTestTabPanel">
                            <Tabs>
                                <ext:Tab ID="Tab1">
                                    <Body>
                                        <ext:BorderLayout runat="server">
                                            <West>
                                                <ext:Panel runat="server" Width="350">
                                                    <Body>
                                                        West panel.
                                                    </Body>
                                                </ext:Panel>
                                            </West>
                                            <Center>
                                                <ext:Panel runat="server">
                                                    <Body>
                                                        <ext:Button ID="Button1" runat="server" Text="Next">
                                                            <Listeners>
                                                                <Click Handler="BLTestTabPanel.setActiveTab(1);" />
                                                            </Listeners>
                                                        </ext:Button>
                                                    </Body>
                                                </ext:Panel>
                                            </Center>
                                        </ext:BorderLayout>
                                    </Body>
                                </ext:Tab>
                                <ext:Tab ID="Tab2">
                                    <Body>
                                        <ext:BorderLayout ID="BorderLayout1" runat="server">
                                            <West>
                                                <ext:Panel ID="Panel1" runat="server" Width="350">
                                                    <Body>
                                                        West panel.
                                                    </Body>
                                                </ext:Panel>
                                            </West>
                                            <Center>
                                                <ext:Panel ID="Panel2" runat="server">
                                                    <Body>
                                                        <ext:Button ID="Button2" runat="server" Text="Next">
                                                            <Listeners>
                                                                <Click Handler="BLTestTabPanel.setActiveTab(2);" />
                                                            </Listeners>
                                                        </ext:Button>
                                                    </Body>
                                                </ext:Panel>
                                            </Center>
                                        </ext:BorderLayout>
                                    </Body>
                                </ext:Tab>
                                <ext:Tab ID="Tab3">
                                    <Body>
                                        <ext:BorderLayout ID="BorderLayout2" runat="server">
                                            <West>
                                                <ext:Panel ID="Panel3" runat="server" Width="350">
                                                    <Body>
                                                        West panel.
                                                    </Body>
                                                </ext:Panel>
                                            </West>
                                            <Center>
                                                <ext:Panel ID="Panel4" runat="server">
                                                    <Body>
                                                        <ext:Button ID="Button3" runat="server" Text="Next">
                                                            <Listeners>
                                                                <Click Handler="BLTestTabPanel.setActiveTab(0);" />
                                                            </Listeners>
                                                        </ext:Button>
                                                    </Body>
                                                </ext:Panel>
                                            </Center>
                                        </ext:BorderLayout>
                                    </Body>
                                </ext:Tab>
                            </Tabs>
                        </ext:TabPanel>
                        </ext:FitLayout>
                    </Body>
                </ext:Panel>    
            </ext:FitLayout>
        </Body>
    </ext:ViewPort>
    Added to this are four screenshots that show the issue and the steps to reproduce.

    In order to reproduce the issue, do as follows:
    - Launch the page in maximized mode (easiest way of resizing)
    - Click one of the other tabs (which one does not matter)
    - De-maximize the page
    - Go back to the first tab

    The west panel will now have dissapeared from the tab (as seen in the third attachment).

    As mentioned in our previous post, the active tab resizes correctly. Only other tabs that had been loaded before are affected by this behaviour (as seen in the fourth attachment).

    Thanks for the suggestions, however I haven't used either of the possible culprits in this example and it doesn't function properly yet.

    Thanks for the help so far,
    Riset


  4. #4
    Nov 25, 2009, 10:54 AM

    RE: [CLOSED] BorderLayout and resizing

    Hi,

    Thanks for the example. Fixed. Please update from SVN
  5. #5
    Nov 25, 2009, 1:41 PM

    RE: [CLOSED] BorderLayout and resizing

    Hi,

    I didn't have the time to investigate the result well. I've compiled the new version of svn.

    In a quick review it seems to be working correctly. Some possible bug did occure during the test. Regarding pushing a toolbar below the centerpanel body leaving a gap between the centerpanel body and the toolbar after a resize.

    Not sure this is related to this issue, so i will investigate and test it tommorow. And leave the conclusion post on this topic.


    , Riset

  6. #6
    Nov 26, 2009, 6:37 AM

    RE: [CLOSED] BorderLayout and resizing

    Works like a charm, it seems the problem was produced by old cache data in IE 8.0. :))

Similar Threads

  1. BorderLayout inside BorderLayout that is in MasterPage
    By drorl in forum 2.x Help
    Replies: 0
    Last Post: Apr 19, 2012, 3:52 PM
  2. [CLOSED] Bug resizing ViewPort
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 15, 2010, 6:33 PM
  3. Maximized Window in Center of BorderLayout not resizing?
    By wexman in forum 1.x Help
    Replies: 2
    Last Post: Oct 14, 2010, 10:05 AM
  4. Nested BorderLayout inside a TablePanel inside a BorderLayout
    By cdmdotnet in forum 1.x Help
    Replies: 1
    Last Post: Jun 08, 2010, 12:51 AM
  5. BorderLayout on BorderLayout do not render
    By nanosassa in forum 1.x Help
    Replies: 1
    Last Post: Apr 22, 2009, 4:05 PM

Posting Permissions