[CLOSED] Change parent of item, or dockable panel?

  1. #1

    [CLOSED] Change parent of item, or dockable panel?

    Hi,

    I've asked a similair question in the past regarding making a panel fullscreen but my scenario has changed and I wondered if you have any guidance. I've got a layout as follows:

    Click image for larger version. 

Name:	fullscreen.jpg 
Views:	96 
Size:	21.3 KB 
ID:	3368

    So I want to be able to press the fullscreen button to make the HtmlEditor take up as much of the ViewPort as possible. The problem is that the tabPanels child panels are IFrames, and so the parent of the HtmlEditor is not as big as the viewport area.

    Can I move the parent, or somehow dock a window in this bottom half, if I create it at the root of the page? Or is there another way to tackle this I'm not seeing?

    Thanks.
    Last edited by Daniil; Oct 26, 2011 at 8:50 AM. Reason: [CLOSED]
  2. #2
    Hi,

    With IFrames it could look something like this:

    Example Parent Page

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/jscript">
            var onMaximize = function (ct) {
                var htmlEditorIFrame = ct.getBody().HtmlEditor1;
                if (Window1.items.getCount() === 0) {
                    Window1.add(htmlEditorIFrame.initialConfig);
                }
                Window1.getComponent(0).setValue(htmlEditorIFrame.getValue());
                Window1.show();
            };
    
            var onHide = function (win, ct) {
                var htmlEditorIFrame = ct.getBody().HtmlEditor1;
                htmlEditorIFrame.setValue(Window1.getComponent(0).getValue());  
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel runat="server" Region="Center">
                        <AutoLoad Mode="IFrame" Url="http://rambler.com" ShowMask="true" />
                    </ext:Panel>
                    <ext:Panel ID="Panel1" runat="server" Region="South" Height="200" Collapsible="true">
                        <AutoLoad Mode="IFrame" Url="Test.aspx" ShowMask="true" />
                        <Tools>
                            <ext:Tool Type="Maximize" Handler="onMaximize(panel);" />
                        </Tools>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
            <ext:Window ID="Window1" runat="server" Hidden="true" Layout="FitLayout" Maximized="true">
                <Listeners>
                    <Hide Handler="onHide(this, Panel1);" />
                </Listeners>
            </ext:Window>
        </form>
    </body>
    </html>
    Example IFrame Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:HtmlEditor ID="HtmlEditor1" runat="server" />
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Though we would recommend you to don't use the AutoLoad Mode="IFrame", it's fairly a heavy-weight thing for a browser (especially for IE).

    You could use the AutoLoad Mode="MergeMode" or just render widgets dynamically.
    https://examples1.ext.net/#/Panel/Ba...oad_MergeMode/
    https://examples1.ext.net/#/XRender/Basic/New_Window/
  3. #3
    Thanks; I've definetely noticed that IE has horrible memory usage when we have multiple IFrames. Can you confirm if the MergeMode has any particular restrictions I should look out for? Our layouts tend to includ editable grids bound to multiple stores (combos etc).

    Thanks,
    Peter
  4. #4
    Well, I can say there should not be any irresolvable problem. At least, we've not faced it before.

    But I'd recommend you to don't hurry and start from converting one page.

    I would also recommend to investigate or, at least, read these threads:
    http://forums.ext.net/showthread.php?13726
    http://forums.ext.net/showthread.php?15712
    http://forums.ext.net/showthread.php?15699
  5. #5
    Thanks for your help. I'll look into converting some pages and see how I get on.
  6. #6
    Ok, marking the thread as closed.

    If you will be in trouble either with a dynamic control rendering or the MergeMode, please feel free to start a new thread with a link on the current thread.

Similar Threads

  1. Replies: 4
    Last Post: Jun 04, 2012, 12:47 PM
  2. [CLOSED] Access Parent item
    By Digital.Dynamics in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 19, 2012, 9:06 AM
  3. [CLOSED] Change combobox item text
    By jchau in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 25, 2011, 1:20 PM
  4. Replies: 16
    Last Post: Jun 24, 2010, 2:41 PM
  5. Replies: 6
    Last Post: Jun 19, 2008, 5:17 PM

Tags for this Thread

Posting Permissions