What's New?

[CLOSED] Anchored floating window

  1. #1
    Mar 16, 2013, 2:07 PM

    [CLOSED] Anchored floating window

    Hi,

    How could I fix a window on top right of the screen? Im using a border layout,

    ext:Viewport runat="server" Layout="BorderLayout"
    I have attached a print with I need (the red region is a expected anchored floating window):

    Click image for larger version.  Name: window_fixed.png  Views: 47  Size: 48.2 KB  ID: 5836

    Thanks,

    Felipe Schneider
    Last edited by Daniil; Mar 26, 2013 at 4:23 AM. Reason: [CLOSED]
  2. #2
    Mar 18, 2013, 3:12 AM
    Hello!

    Sorry, I don't quite understand you question. You mean Ext.NET window or Browser window? By default ViewPort automatically sizes itself to the size of the browser viewport. So you cannot align it.

    If you meant Ext.NET window you can use the following approach:
    <ext:Window runat="server" ID="Window1">
	<Items>
		<ext:Panel runat="server" Region="Center">
			<Content>
				Content
			</Content>
		</ext:Panel>
	</Items>
	<Listeners>
		<AfterRender Handler="this.alignTo(Ext.getBody(), 'tr-tr?');" Delay="1"></AfterRender>
	</Listeners>
</ext:Window>
  3. #3
    Mar 18, 2013, 7:58 AM
    Hi Felipe,

    Welcome to the Ext.NET forums!

    You also might need to re-align a Window on a browser window's resizing.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <WindowResize Handler="App.Window1.alignTo(Ext.getBody(), 'tr-tr?');" />
            </Listeners>
        </ext:ResourceManager>

        <ext:Window ID="Window1" runat="server">
            <Listeners>
                <AfterRender Handler="this.alignTo(Ext.getBody(), 'tr-tr?');" Delay="1" />
            </Listeners>
        </ext:Window>
    </form>
</body>
</html>
    You can add X and Y offsets if needs, see:
    http://docs.sencha.com/ext-js/4-2/#!...method-alignTo

    Also please note that a Window doesn't depend on a Viewport, because a Window is a floating component and doesn't participate in layout.
  4. #4
    Mar 20, 2013, 2:26 PM
    Hi,

    Worked like a charm. Theres only one question:

    Is it possible to prevent the flicker of the screen because when the page opens the window this centralized, and after a moment she appears in the right corner. It is possible that she appears initially in the right corner of the screen?

    Thanks,

    Felipe
  5. #5
    Mar 20, 2013, 4:32 PM
    Yes, that is not beautiful.

    Please try this one.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <DocumentReady Handler="var win = App.Window1;
                                        win.alignTo(Ext.getBody(), 'tr-tr?');" />
                <WindowResize Handler="App.Window1.alignTo(Ext.getBody(), 'tr-tr?');" />
            </Listeners>
        </ext:ResourceManager>
 
        <ext:Window ID="Window1" runat="server" />
    </form>
</body>
</html>
  6. #6
    Mar 21, 2013, 12:29 AM
    Daniil,

    When I use the code:

    <DocumentReady Handler="var win = App.Window1; 
win.alignTo(Ext.getBody(), 'tr-tr?');" />
    I got this error:

    Click image for larger version.  Name: erro.png  Views: 32  Size: 16.8 KB  ID: 5874

    Can you help-me please?

    Thanks,

    Felipe.
  7. #7
    Mar 21, 2013, 7:20 AM
    Yes, my example can cause such an error if the page is more complex.

    This should work well.

    Example
    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  
<!DOCTYPE html>
  
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <WindowResize Handler="App.Window1.alignTo(Ext.getBody(), 'tr-tr?');" />
            </Listeners>
        </ext:ResourceManager>
  
        <ext:Window ID="Window1" runat="server" Hidden="true">
            <Listeners>
                <AfterRender Handler="this.setPagePosition(this.getAlignToXY(Ext.getBody(), 'tr-tr?'));
                                      this.show();" />
            </Listeners>
        </ext:Window>
    </form>
</body>
</html>

Similar Threads

  1. Floating panel with TriggerField
    By glenh in forum 2.x Help
    Replies: 0
    Last Post: Feb 04, 2013, 8:34 PM
  2. [CLOSED] Window floating with Y = 0
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 11, 2012, 3:13 PM
  3. [CLOSED] How to achieve anchored layout...
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 25, 2011, 10:16 AM
  4. [CLOSED] Anchored SelectBox drop down is not right width
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 17, 2009, 9:20 AM
  5. Floating Panel in MasterPage
    By Emre in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 06, 2009, 4:27 AM

Tags for this Thread

Posting Permissions