[CLOSED] wanting to get panel to resize with browser

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] wanting to get panel to resize with browser

    I'm trying to get the borderlayout to resize as the browser changes size. I tried the resize event on the panel listener but that doesn't seem to to work for me. The page is listed below that I've been trying with.

    
    <%@ 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" >
    
        function Resize() {
            var browserHeight = &#100;ocument.getElementById("<%= Panel1.ClientID %>").clientHeight;
            var browserWidth = &#100;ocument.getElementById("<%= Panel1.ClientID %>").clientWidth;
            
    
        }
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
     
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
        
            <ext:Panel ID="Panel1" runat="server" Height="300" Title="Title" >
                <Listeners>
                <Resize fn="Resize" />
                </Listeners>
                <Content>
                
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <West Collapsible="true" Split="true">
                            <ext:Panel ID="Panel2" runat="server" Title="West" Width="175">
                            
                            </ext:Panel>
                        </West>
                        <Center>
                            <ext:Panel ID="Panel3" runat="server" Title="Center">
                            </ext:Panel>
                        </Center>
                        <East Collapsible="true" Split="true">
                            <ext:Panel ID="Panel4" runat="server" Title="East" Width="175">
                            </ext:Panel>
                        </East>
                        <South Collapsible="true" Split="true">
                            <ext:Panel ID="Panel5" runat="server" Height="150" Title="South">
                            </ext:Panel>
                        </South>
                    </ext:BorderLayout>
                
                </Content>
            </ext:Panel>
        
        
        
    
        </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] wanting to get panel to resize with browser

    Hi Peter,

    I remember running into this issue a long time ago and I thought we added a fix to ensure the BorderLayout resized properly when inside a Panel.


    I'm working on this defect right now. Please do not spend any time trying to debug or create a work-around as I will come up with a solution.


    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: [CLOSED] wanting to get panel to resize with browser

    Hi Peter,

    A fix for this issue has been committed to SVN. By SVN updating and rebuilding from source your sample should pick up the functionality and the border layout will resize properly if the parent Panel is resized.


    If you are not building from SVN, you work-around this resizing issue by setting the MonitorResize property to "true".


    Example


    <ext:Panel ID="Panel1" runat="server" MonitorResize="true">

    The fix will be publicly available with the v0.7.0 release. 


    Hope this helps.


    Geoffrey McGill
    Founder & CEO
  4. #4

    RE: [CLOSED] wanting to get panel to resize with browser



    Hi Peter,

    I forgot to mention. You do not require the <Resize> Listener or the Resize JavaScript function. You can just delete all that code.
    Geoffrey McGill
    Founder & CEO
  5. #5

    RE: [CLOSED] wanting to get panel to resize with browser

    I just updated from svn and my results show that if I do not put a height on the panel, that all I get is the title. Here is my code: (BTW, whether or not I use the tag you suggest).

    
    
    
    <%@ 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>
    
    
    <form id="form1" runat="server">
    
    
    
    
    
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    
    
    </ext:ScriptManager>
    
    
    
    
    
    <ext:Panel ID="Panel1" runat="server" Title="Title" MonitorResize="true" >
    
    
    
    
    
    <Content>
    
    
    
    
    
    <ext:BorderLayout ID="BorderLayout1" runat="server">
    
    
    <West Collapsible="true" Split="true">
    
    
    <ext:Panel ID="Panel2" runat="server" Title="West" Width="175">
    
    
    
    
    
    </ext:Panel>
    
    
    </West>
    
    
    <Center>
    
    
    <ext:Panel ID="Panel3" runat="server" Title="Center">
    
    
    </ext:Panel>
    
    
    </Center>
    
    
    <East Collapsible="true" Split="true">
    
    
    <ext:Panel ID="Panel4" runat="server" Title="East" Width="175">
    
    
    </ext:Panel>
    
    
    </East>
    
    
    <South Collapsible="true" Split="true">
    
    
    <ext:Panel ID="Panel5" runat="server" Height="150" Title="South">
    
    
    </ext:Panel>
    
    
    </South>
    
    
    </ext:BorderLayout>
    
    
    
    
    
    </Content>
    
    
    </ext:Panel>
    
    
    
    
    
    
    
    
    
    
    
    
    </form>
    
    
    </body>
    
    
    </html>
  6. #6

    RE: [CLOSED] wanting to get panel to resize with browser

    BTW, I will need to catch the resize event because I have to force a repaint event on the control I'm putting inside one of the panels. Can you show me when you get a chance how to set the delay on calling the resize event. That is, as the browser changes size, I don't want it hammering my control with repaint events.

    Thanks,
  7. #7

    RE: [CLOSED] wanting to get panel to resize with browser

    Hi Peter,

    each Listener/AjaxEvent has Delay property

    Delay - The number of milliseconds to delay the invocation of the handler after the event fires.

    Vladimir Shcheglov
    Sr. Developer
  8. #8

    RE: [CLOSED] wanting to get panel to resize with browser

    Hi Peter,

    I think you might actually want to be using the .Buffer property of the AjaxEvent. The .Buffer property will only allow one event to fire within the Buffer period. You can set the .Buffer to "1000" if you only want the <Resize> Listener to fire one every second. 


    See http://www.extjs.com/deploy/dev/docs...er=addListener


    The .Delay property only adds a delay until when the .Handler (or .Fn) is called. The same number of Resize Events are wired up (maybe once every 50milliseconds) and the firing of each will just be delayed by the number of milliseconds provided by the .Delay property.


    Hope this helps.


    Geoffrey McGill
    Founder & CEO
  9. #9

    RE: [CLOSED] wanting to get panel to resize with browser

    The listener delay works great, thanks.

    I'm still having problems (even with the build from 10 minutes ago from svn) getting the height of the panel to change on browser resize. As I put in the example above, if I remove the height attribute from the panel, the panel disappears.
  10. #10

    RE: [CLOSED] wanting to get panel to resize with browser

    Hi Peter,

    may be I misunderstood but if you need to resize a panel on whole browser window then you can use ViewPort control with center region.

    Also you can be interested with AnchorLayout. For example, next example shows how to cretae three regions page (top and bottom regions with height 100 px and center regions placed other free space, all regions fill browser window)

    <ext:ViewPort ID="ViewPort1" runat="server">
                <Content>
                   <ext:AnchorLayout ID="AnchorLayout1" runat="server">
                        <ext:Anchor>
                            <ext:Panel 
                                ID="Panel1" 
                                runat="server" 
                                Title="Top" 
                                Height="100"/>
                        </ext:Anchor>
                        <ext:Anchor Vertical="-200">
                            <ext:Panel 
                                ID="Panel2" 
                                runat="server" 
                                Title="Center" 
                                Html="Center" 
                                />
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:Panel 
                                ID="Panel3" 
                                runat="server" 
                                Title="Bottom" 
                                Html="Bottom" 
                                Height="100" 
                                />
                        </ext:Anchor>
                    </ext:AnchorLayout>  
                </Content>
            </ext:ViewPort>
    If it is not related with your requirments then just ignore this post
    Vladimir Shcheglov
    Sr. Developer
Page 1 of 2 12 LastLast

Similar Threads

  1. GridPanel doesn't resize with browser
    By jimlahey in forum 1.x Help
    Replies: 1
    Last Post: Aug 18, 2011, 2:58 AM
  2. [CLOSED] Problem with Gridpanel and Viewport on browser resize
    By John_Writers in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 10, 2011, 10:44 AM
  3. Resizer Vs. PanelResizer; Wanting split panel
    By camus92 in forum 1.x Help
    Replies: 2
    Last Post: Mar 06, 2009, 4:19 PM
  4. Gridpanel resize with browser window
    By DasPhansom in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2008, 12:05 PM
  5. [CLOSED] Auto Resize of North Panel in ViewPort on Panel.AutoLoad
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 19, 2008, 12:13 AM

Posting Permissions