Image control causes display issue in border layout on initial load
I have a page with a border layout. The site is setup so that a host could add their own header image in the north panel (or have no image at all), so I need the panel to be autoheight=true, rather than setting a static height.
The west, center and east panels adjust only for the height of the other controls in the north panel (in my sample - the Toolbar). If you resize the west panel or reload the page, the panels all adjust for the image. So this issue is only apparent on the first load of the page.
I have seen the issue occur once in IE 7, it's been reported as happening in Chrome, and I can consistently reproduce in Firefox (I'm using 3.5.4). Each time I close the browser then re-open with the page, the issue is seen.
Here is a sample page (I also uploaded a jpg to use):
Code:
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Collapsible="False" Split="False">
<ext:Panel ID="NorthPanel" runat="server" TitleCollapse="true" AutoHeight="true" BodyStyle="padding:0px;" Border="false" ButtonAlign="Right">
<Body>
<ext:Image ID="HostHeaderImage" runat="server" AutoHeight="true" HideLabel="true" ImageUrl="header.jpg" />
</Body>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarTextItem ID="LoggedInAs" runat="server" Text="Logged in as Sample" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</North>
<East Collapsible="true" Split="true" />
<South Collapsible="False" Split="False">
<ext:Panel ID="SouthPanel" runat="server" Height="0" Title="Sample Page" BodyStyle="padding:0px;">
<Body>
</Body>
</ext:Panel>
</South>
<West Collapsible="true" Split="true" MinWidth="225" MaxWidth="400">
<ext:Panel ID="WestPanel" runat="server" Title="Menu" Width="225">
<Body>
</Body>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="CenterPanel" runat="server">
<Body>
</Body>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
RE: Image control causes display issue in border layout on initial load
Hi jpadgett,
The best advice from us is to always explicitly set the Height of the North Panel, and set the height of the <ext:Image> and remove the AutoHeight="true" property.
The AutoHeight property can give unexpected results and explicitly setting the Height will result in better performance.
It's best to get the height of the image on the server and set the .Height property.
There is a potential work-around for your original code sample by calling Viewport1.DoLayout() within the Page_Load event which will force a re-calc of layout on page_load.
Example
Code:
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
this.ViewPort1.DoLayout();
}
}
</script>
Hope this helps.
RE: Image control causes display issue in border layout on initial load
One other thing... add an <ext:ContainerLayout> around the <ext:Image> in the "NorthPanel".
Example
Code:
<ext:Panel
ID="NorthPanel"
runat="server"
TitleCollapse="true"
Border="false"
AutoHeight="true"
ButtonAlign="Right">
<Body>
<ext:ContainerLayout runat="server">
<ext:Image ID="HostHeaderImage" runat="server" HideLabel="true" ImageUrl="header.jpg" />
</ext:ContainerLayout>
</Body>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarTextItem ID="LoggedInAs" runat="server" Text="Logged in as Sample" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
RE: Image control causes display issue in border layout on initial load
Thanks for the responses. I ended up having to go with your initial advice and pass in the configured header size so that the North Panel would not be covered up.
The weird thing about the issue is that if the page is refreshed you can see the west and center panels start out over the image in the north panel and then jump down to where they are supposed to be. It only happens when the page first loads after the browser has been opened. Whatever event fires that places the panels correctly after each successive page load should be firing on the intial one as well, one would think.
All is good, though. Thanks again for your help.
