Hi Marius,
The css used in the <ext:Center> is a little greedy and is cascading down and somehow affecting the GridPanel's layout in IE7.
I worked around the problem by adding a <ext:FitLayout> around the <ext:GridPanel> and then added the following css class.
Example
<style type="text/css">
#GridPanel1 .x-panel-body {
text-align: left;
}
</style>
Full .aspx code sample below.
The complexity of your layout is not a problem. We just need to refine the css for the <ext:CenterLayout> so it doen't center *everything* below it.
Example
<%@ 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">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">
#GridPanel1 .x-panel-body {
text-align: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<asp:XmlDataSource
ID="XmlDataSource1"
runat="server"
DataFile="../Shared/Plants.xml"
TransformFile="../Shared/Plants.xsl"
/>
<ext:Store runat="server" ID="Store1" DataSourceID="XmlDataSource1">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Common" />
<ext:RecordField Name="Botanical" />
<ext:RecordField Name="Light" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Availability" Type="Date" DateFormat="m/d/Y" />
<ext:RecordField Name="Indoor" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="Common" Direction="ASC" />
</ext:Store>
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:CenterLayout ID="CenterLayout1" runat="server">
<ext:Panel
ID="Panel1"
runat="server"
AutoScroll="true"
BodyStyle="padding:0px 0;">
<CustomConfig>
<ext:ConfigItem Name="width" Value="100%" Mode="Value" />
</CustomConfig>
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center>
<ext:TabPanel
ID="CenterPanel"
runat="server"
ActiveTabIndex="1">
<Tabs>
<ext:Tab
ID="Tab1"
runat="server"
Title="Search"
Closable="false"
Border="false"
BodyStyle="padding:6px;">
<Body>
<ext:FitLayout runat="server">
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Plants"
Frame="false"
StoreID="Store1">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column
ColumnID="Common"
Header="Common Name"
DataIndex="Common"
Width="220"
Sortable="true"
/>
<ext:Column Header="Light" DataIndex="Light" Width="130" Sortable="true" />
<ext:Column Header="Price" DataIndex="Price" Width="70" Align="right" Sortable="true" />
<ext:Column Header="Available" DataIndex="Availability" Width="95" Sortable="true">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column Header="Indoor?" DataIndex="Indoor" Width="55" Sortable="true" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolBar ID="PagingToolBar1" runat="server" PageSize="10" />
</BottomBar>
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:Tab>
<ext:Tab
ID="Tab2"
runat="server"
Title="Marius Serban"
Closable="true"
Border="false"
BodyStyle="padding:6px;">
<Body>some text</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</Center>
</ext:BorderLayout>
</Body>
</ext:Panel>
</ext:CenterLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>
Hope this helps.
