Sep 06, 2008, 2:57 PM
TabPanel and ComboBox (Layout issue)
Hello,
The below example demonstrates that their is a minor layout issue with the Ext:ComboBox in both IE6 and FF3.0 when inside a TabPanel with AutoPostBack and DeferredRender disabled:
Example.aspx:
1. Load page
2. Click the ComboBox and see the dropdown renders properly
3. Click "Tab 2"
4. Click the ComboBox and see the dropdown does not render properly like on the first tab
I've also noted in my solution that the dropdown division sometimes will render squished to approx. 100px regardless of the content of the dropdown. I can't seem to replicate in an example, so I'm hoping this example is contributing.
Cheers,
Timothy
The below example demonstrates that their is a minor layout issue with the Ext:ComboBox in both IE6 and FF3.0 when inside a TabPanel with AutoPostBack and DeferredRender disabled:
Example.aspx:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<ext:ScriptManager ID="ScriptManager2" runat="server" />
<p><a href="Example.aspx">Reload</a></p>
<ExtJS:TabPanel ID="Tabs1" runat="server" ActiveTab="0" AutoPostBack="False" AutoHeight="True" AutoWidth="True">
<Tabs>
<ExtJS:Tab ID="Tab1" runat="server" Title="Tab1" AutoHeight="True" AutoWidth="True">
<Content>
<ExtJS:ComboBox ID="drpDemo" runat="server" Editable="True" EmptyText="----" ForceSelection="True" Mode="Local" Selectonfocus="True" TriggerAction="All" TypeAhead="True" Width="255">
<Items>
<ExtJS:ListItem Text="All" Value="All" />
<ExtJS:ListItem Text="None" Value="None" />
</Items>
</ExtJS:ComboBox>
</Content>
</ExtJS:Tab>
<ExtJS:Tab ID="Tab2" runat="server" Title="Tab2" AutoHeight="True" AutoWidth="True">
<Content>
<ExtJS:ComboBox ID="drpDemo2" runat="server" Editable="True" EmptyText="----" ForceSelection="True" Mode="Local" Selectonfocus="True" TriggerAction="All" TypeAhead="True" Width="255">
<Items>
<ExtJS:ListItem Text="All" Value="All" />
<ExtJS:ListItem Text="None" Value="None" />
</Items>
</ExtJS:ComboBox>
</Content>
</ExtJS:Tab>
</Tabs>
</ExtJS:TabPanel>
</form>
</body>
</html>
Replication steps:1. Load page
2. Click the ComboBox and see the dropdown renders properly
3. Click "Tab 2"
4. Click the ComboBox and see the dropdown does not render properly like on the first tab
I've also noted in my solution that the dropdown division sometimes will render squished to approx. 100px regardless of the content of the dropdown. I can't seem to replicate in an example, so I'm hoping this example is contributing.
Cheers,
Timothy