PDA

View Full Version : [FIXED] [V0.7] BorderLayout in TabPanel not working In Internet Explorer



Washburn
Oct 21, 2008, 2:48 AM
Hi,

I have a ViewPort->BorderLayout->TabPanel->Tab->BorderLayout structure and notice that in Internet Explorer when I toggle between two tabs, the tab that contains a BorderLayout has the regions collapse/resize. This is working fine in Firefox/Chrome. Has anyone come across this or have a suggestion.

Following is the layout :




<ext:ScriptManager ID="extScriptManager" runat="server" />

<ext:ViewPort id="ViewPort" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayoutOuter" runat="server">
<Center>
<ext:TabPanel ID="TabPanel" runat="server" ActiveTabIndex="0">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab1">
<Content>
<ext:BorderLayout id="BorderLayoutInner" runat="server">
<Center>
<ext:Panel ID="CenterPanelInner" runat="server" Title="CenterPanelInner">
<Content>
CenterPanelInner
</Content>
</ext:Panel>
</Center>
<East>
<ext:Panel ID="EastPanelInner" runat="server" Title="EastPanelInner">
<Content>
EastPanelInner
</Content>
</ext:Panel>
</East>
<South>
<ext:Panel ID="SouthPanelInner" runat="server" Title="SouthPanelInner">
<Content>
SouthPanelInner
</Content>
</ext:Panel>
</South>
</ext:BorderLayout>
</Content>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Tab2">
<Content>
Tab2
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</Center>
<South>
<ext:Panel ID="SouthPanelOuter" runat="server">
<Content>
SouthPanelOuter
</Content>
</ext:Panel>
</South>
<North>
<ext:Panel ID="NorthPanelOuter" runat="server">
<Content>
NorthPanelOuter
</Content>
</ext:Panel>
</North>
</ext:BorderLayout>
</Content>
</ext:ViewPort>

geoffrey.mcgill
Oct 21, 2008, 4:38 AM
Hi Washburn,

Thanks for the code sample. I was able to reproduce the layout issue in IE.

I found and fixed a small bug which prevented the Tab from re-calculating its layout properly.

The bug fix has been committed to SVN and will be publicly available in the next release (v0.7).

With the current release (v0.6), you can work-around the defect by adding the following <DocumentReady> code to your <ext:ScriptManager>.

Example


<ext:ScriptManager ID="ScriptManager1" runat="server">
<Listeners>
<DocumentReady Handler="#{TabPanel}.events['tabchange'].clearListeners();" />
</Listeners>
</ext:ScriptManager>

In the above <DocumentReady> Listener, the "#{TabPanel}" is an ID Token placeholder for your <ext:TabPanel> control. The token will be replaced with the .ClientID of the <ext:TabPanel> at runtime.

Hope this helps.

Washburn
Oct 21, 2008, 1:52 PM
Thanks for the quick fix!! This works great.