PDA

View Full Version : GridPanel resize in Panel->Fitlayout



Washburn
Oct 25, 2008, 2:27 AM
I have a GridPanel that does not resize when the browser window resizes. The grid is in a Panel->FitLayout structure. When I resize the browser window the GridPanel will not resize to the Panel. In IE the Grid does not even render properly to begin with. Any ideas if this is possible?

Following is modified example to demonstrate :



<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = this.Jobs;
this.Store1.DataBind();
}

private List<Job> Jobs
{
get
{
List<Job> jobs = new List<Job>();


for (int i = 1; i <= 50; i++)
{
jobs.Add(new Job(
i,
"Task" + i.ToString(),
DateTime.Today.AddDays(i),
DateTime.Today.AddDays(i + i),
(i%3 == 0)));
}


return jobs;
}
}


public class Job
{
public Job(int id, string name, DateTime start, DateTime end, bool completed)
{
this.ID = id;
this.Name = name;
this.Start = start;
this.End = end;
this.Completed = completed;
}


public int ID { get; set; }
public string Name { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool Completed { get; set; }
}
</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />


<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Start" Type="Date" />
<ext:RecordField Name="End" Type="Date" />
<ext:RecordField Name="Completed" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>


<ext:Panel ID="Panel1" runat="server" Title="Grid Panel">
<Content>
<ext:FitLayout runat="server">
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
StripeRows="true"
Header="false"
Border="false"
AutoExpandColumn="Name" >
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column
Header="ID"
Width="40"
Sortable="true"
DataIndex="ID"
/>
<ext:Column
ColumnID="Name"
Header="Job Name"
Sortable="true"
DataIndex="Name"
/>
<ext:Column
ColumnID="Start"
Header="Start"
Width="120"
Sortable="true"
DataIndex="Start">
</ext:Column>
<ext:Column
ColumnID="End"
Header="End"
Width="120"
Sortable="true"
DataIndex="End">
</ext:Column>
<ext:Column
ColumnID="Completed"
Header="Completed"
Width="80"
Sortable="true"
DataIndex="Completed">
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</form>
</body>
</html>

geoffrey.mcgill
Oct 25, 2008, 5:11 AM
Hi Washburn,

The GridPanels height dimension needs to be set with either a fixed .Height value or needs to be contained within another Panel/Layout whos height has been set. 


To solve problem with your code sample you can set the .Height property on the Panel1 control. Or, if you happen to remove the GridPanel from its parent Panel/FitLayout, you can set the .Height property on GridPanel1.


Example



<ext:Panel ID="Panel1" runat="server" Title="Grid Panel" Height="350">

Washburn
Oct 25, 2008, 4:43 PM
 Hi Geoffrey,

Thanks for the tip.  I am still having a problem however.  I have the .Height property set and can see the grid, but when I resize the browser window horizontally, the AutoExpandColumn does not resize.  I also noticed that if I replace the <ext:Panel> with an <ext:Window> and resize the Window, everything works fine.  So I'm not even sure if it is possible to have the AutoExpandColumn work outside of a <ext:Window>... any thoughts?

mthird
Oct 27, 2008, 6:26 PM
You need to set the MonitorResize attribute on. Otherwise it will only autosize on initial render:



<ext:Panel runat="server" Height="400" AutoWidth="true" MonitorResize="true">
<Content>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="store1" Frame="true" Height="400"
AutoExpandColumn="Buyer" Title="My Grid" StripeRows="true">
</Content>
</ext:Panel>