Panel / Grid Auto resize on browser window resize
Hello,
I am upgrading a project from ext.net 1.4 to 2.5.1. There used to be a property I could set which would trigger panel / grid resizing when the browser window is resized called MonitorResize="True". That doesn't seem to be available in 2.5.1. I can see my Container Panel resizing, but the panels nested inside the container won't scale to the Container. I know the VewPort control works, but I cannot use the viewport in my case due to some issues with my master page.
This is a sample of my code
Code:
<ext:Container runat="server" Layout="BorderLayout" Height="700" StyleSpec="Width:100%" ResizeHandles="All" MonitorResize="true" AnchorHorizontal="100%">
<Items>
<ext:Panel ID="pnlSearchCriteria" runat="server" Collapsible="true" MinWidth="368"
Split="true" Width="368" Title="Search Criteria" Height="700" Layout="FormLayout"
TabTip="Search Criteria Panel (Shortcut: Ctrl + H)" Region="West">
<Items>
</Items>
<BottomBar>
<ext:Toolbar ID="bottom" runat="server">
<Items>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
<ext:Container runat="server" ID="pgpanel" Layout="FitLayout" ResizeHandles="All" AnchorHorizontal="100%" Region="Center">
<Items>
<ext:GridPanel ID="GridPanel1" StripeRows="true" AutoDataBind="false" Title="Search Results"
Header="true" TrackMouseOver="false" runat="server" TitleCollapse="false"
Collapsible="false" AutoFill="false"
MonitorResize="true" Stateful="true" EnableColumnHide="true">
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server"
DisplayInfo="true" DisplayMsg="Displaying Record(s) {0} - {1} of {2}" StoreID="Store1"
EmptyMsg="No records to display" EnableViewState="false">
<Items>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Container>
</Items>
</ext:Container>
Manual resize force onWindowResize method
Hi again,
I don't know if this is the best solution but it seems to work. I added this JavaScript call to my page and it now resizes the grid when the browser window is resized:
Code:
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
Ext.EventManager.onWindowResize(function (w, h) {
#{vport}.doLayout(true);
});
</script>
</ext:XScript>
If there is a better "supported" method please let me know,
Thanks
