May 29, 2009, 6:58 AM
[CLOSED] Need help with Border layout
Hi
I have 2 problems with this layout,
1. If the windows is resized and made smaller the content should resize the borderlayout and panels. When this happend the borders get really thick, lite 50px or so. It looks really crappy
2. I have a grid panel in this layout with a lot of columns in it, if the page loads up in a small window, and the made bigger by the user, the grid does not repaint and show the columns that where hidden before.
Please try the samle code, and try to resize the window by dragging in the corner of the window.
I use IE7
Thanks
Mikael
<%@ 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">
</script>
<script type="text/javascript">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ScriptManager ID="ScriptManager1" runat="server" >
</ext:ScriptManager>
<form id="form1" runat="server">
<asp:SqlDataSource ID="SqlDS" runat="server" ></asp:SqlDataSource>
<ext:Store ID="Store1" runat="server" DataSourceID="SqlDS">
<Reader>
<ext:JsonReader >
<Fields>
<ext:RecordField Name="test"></ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center Collapsible="false" Split="true">
<ext:Panel ID="pnlBody" runat="server" AutoScroll="true" Header="false" Border="false">
<Body>
<ext:BorderLayout ID="BorderLayout2" runat="server">
<North Split="true" Collapsible="true">
<ext:Panel Height="60" ID="pnlSelection" runat="server" AutoScroll="true" Title="Selection" Border="false" BodyStyle="padding:4px;">
<Body>
</Body>
</ext:Panel>
</North>
<Center >
<ext:Panel ID="pnlCenter" runat="server" AutoScroll="true" Header="false" Border="false" >
<Body>
<ext:BorderLayout ID="BorderLayout3" runat="server">
<North Split="true" >
<ext:Panel Height="290" ID="pnlNorth" runat="server" AutoScroll="true" Title="North" Border="false" BodyStyle="padding:4px;">
</ext:Panel>
</North>
<Center>
<ext:Panel ID="pnlInnerCenter" runat="server" AutoScroll="true" Header="false" Border="false" >
<Body>
<ext:GridPanel
AutoScroll="true"
StoreID="Store1"
runat="server"
ID="GridPanel1"
Header="false"
AutoWidth="true"
Height="200"
Floating="true" Border="true" BodyBorder="false" >
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Column 1" Width="60">
</ext:Column>
<ext:Column Header="Column 2" Width="60">
</ext:Column>
<ext:Column Header="Column 3" Width="60">
</ext:Column>
<ext:Column Header="Column 4" Width="60">
</ext:Column>
<ext:Column Header="Column 5" Width="60">
</ext:Column>
<ext:Column Header="Column 6" Width="60">
</ext:Column>
<ext:Column Header="Column 7" Width="60">
</ext:Column>
<ext:Column Header="Column 8" Width="60">
</ext:Column>
<ext:Column Header="Column 9" Width="60">
</ext:Column>
<ext:Column Header="Column 10" Width="60">
</ext:Column>
<ext:Column Header="Column 11" Width="60">
</ext:Column>
<ext:Column Header="Column 12" Width="60">
</ext:Column>
<ext:Column Header="Column 13" Width="60">
</ext:Column>
<ext:Column Header="Column 14" Width="60">
</ext:Column>
<ext:Column Header="Column 15" Width="60">
</ext:Column>
<ext:Column Header="Column 16" Width="60">
</ext:Column>
<ext:Column Header="Column 17" Width="60">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ></ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</Body>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Body>
</ext:Panel>
</Center>
<East MinWidth="345" MaxWidth="345" Split="true" Collapsible="false">
<ext:Panel Width="345" ID="pnlEast" runat="server" AutoScroll="true" Title="East" Border="true" BodyStyle="padding:4px;">
</ext:Panel>
</East>
</ext:BorderLayout>
</Body>
</ext:Panel>
</Center>
<South>
<ext:StatusBar
ID="sbBottombar"
runat="server"
DefaultText="">
<Items>
</Items>
</ext:StatusBar>
</South>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>