Panel / Grid Auto resize on browser window resize

  1. #1

    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

        <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>
  2. #2

    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:

    <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
    Last edited by geoffrey.mcgill; May 07, 2014 at 1:59 AM.
  3. #3
    Hi @larotech,

    Welcome to the Ext.NET forums!

    Yes, your solution is good.

Similar Threads

  1. Replies: 1
    Last Post: Mar 27, 2014, 7:58 PM
  2. Gridpanel resize with browser window
    By DasPhansom in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2008, 12:05 PM
  3. Auto Resize Panel in ViewPort on client-side Panel.AutoLoad
    By randy85253 in forum 1.x Premium Help
    Replies: 13
    Last Post: Dec 03, 2008, 3:27 PM
  4. Replies: 4
    Last Post: Nov 19, 2008, 12:13 AM
  5. [CLOSED] wanting to get panel to resize with browser
    By pkellner in forum 1.x Premium Help
    Replies: 10
    Last Post: Oct 15, 2008, 1:05 AM

Tags for this Thread

Posting Permissions