Sep 26, 2011, 2:41 PM
Grid in viewport does not resize until windows resizing has stopped.
I have a grid in a ViewPort to fill a page, however, when you resize the browser window, the grid does not immediately resize until window resizing has stopped. How can I get the grid to resize immediately as the window is being resized? For example, if the window width is changed, there is blue space to the right until window resizing stops. To see running example: http://pj.is-a-geek.com/gridresize
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] {true, DateTime.Now, 1},
new object[] {false, DateTime.Now.AddDays(-1), 2},
new object[] {true, DateTime.Now.AddDays(-2), 3},
new object[] {false, DateTime.Now.AddDays(-3), 4},
new object[] {true, DateTime.Now.AddDays(-4), 5}
};
this.GridPanel1.Store.Primary.DataBind();
}
}
</script>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Region="Center" Layout="FitLayout"
Title="Column Variations" DisableSelection="true" Width="600" Height="350" AutoExpandColumn="TemplColumn">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="booleanCol" Type="Boolean" />
<ext:RecordField Name="dateCol" Type="Date" />
<ext:RecordField Name="numberCol" Type="Int" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:BooleanColumn DataIndex="booleanCol" Header="Boolean" />
<ext:CheckColumn DataIndex="booleanCol" Header="Check" />
<ext:DateColumn DataIndex="dateCol" Header="Date" />
<ext:NumberColumn DataIndex="numberCol" Header="Number" Format="0.00" />
<ext:TemplateColumn DataIndex="" MenuDisabled="true" Header="Template" ColumnID="TemplColumn">
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
{booleanCol}<br />
{dateCol:date("d/m/Y")}<br />
{numberCol}<br />
</tpl>
</Html>
</Template>
</ext:TemplateColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ForceFit="true">
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
</ext:Viewport>
</body>
