[CLOSED] Deferred loading panel

  1. #1

    [CLOSED] Deferred loading panel

    Trying to load a page in a window on the click of a button using the example for deferred loading with Loader control. The window shows but the contents of the inner page do not. Not sure if it is loaded but can't see it or if it isn't loading.

    Outer page:
    <%@ Page Language="VB" %>
    
    <script runat="server">
    
        Public Sub btnSettings_Click(sender As Object, e As EventArgs)
            pnlSettings.Show()
            winSettings.Show()
        End Sub
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
    
        <ext:Window ID="winSettings" runat="server" Hidden="true"
                    Width="500"
                    Height="500">
            <Items>
                <ext:Panel ID="pnlSettings" runat="server" Title="Account Settings" >
                    <Loader
                        runat="server"
                        Url="Settings.aspx"
                        Mode="Frame"
                        TriggerEvent="show"
                        ReloadOnEvent="true"
                        DisableCaching="true">
                        <LoadMask ShowMask="true" />
                    </Loader>
                </ext:Panel>
            </Items>
        </ext:Window>
    
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
    
                <ext:Panel ID="pnlActions" runat="server"
                    Title="Actions"
                    BodyPadding="15"
                    Padding="10"
                    Flex="1"
                    >
                    <Items>
                        <ext:Button runat="server" ID="btnSettings" Text="Settings">
                            <DirectEvents>
                                <Click OnEvent="btnSettings_Click"></Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Panel>
    
            </Items>
        </ext:Viewport>
    
        </form>
    </body>
    </html>
    Inner "Settings.aspx" page:
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
    </head>
    <body>
    
    <%--<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
        <Items>--%>
            <ext:Panel Title="Settings one" runat="server" >
                <items>
                    <ext:TabPanel
                        runat="server"
                        MarginSpec="0 0 20 0">
                        <Defaults>
                            <ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
                            <ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
                        </Defaults>
                        <Items>
                            <ext:Panel
                                runat="server"
                                Title="Management"
                        
                                AutoDataBind="true" >
                                <Items>
                                    <ext:FormPanel runat="server" Title="Triggers" ID="plnCashTriggers" Padding="20" DefaultAnchor="100%"
                                        Collapsible="true">
                                        <Items>
                                            <ext:NumberField ID="TriggerFloor" runat="server" labelwidth="200" FieldLabel="Trigger Floor" AllowBlank="false" Disabled="true" />
                                            <ext:NumberField ID="TriggerTarget" runat="server" labelwidth="200" FieldLabel="Trigger Target" AllowBlank="false" Disabled="true" />
                                            <ext:NumberField ID="TriggerCeiling" runat="server" labelwidth="200" FieldLabel="Trigger Ceiling" AllowBlank="false" Disabled="true" />
                                            <ext:SelectBox ID="TriggerType" runat="server" labelwidth="200" FieldLabel="Trigger Type" SelectedIndex="0" AllowBlank="false" Disabled="true">
                                                <Items>
                                                    <ext:ListItem Text="Percent (%)" Value="percent" />
                                                    <ext:ListItem Text="Dollar ($)" Value="dollar" />
                                                </Items>
                                            </ext:SelectBox>
                                        </Items>
                                    </ext:FormPanel>
    
                                    <ext:FormPanel runat="server" Title="Withdrawals" Padding="20" DefaultAnchor="100%" Collapsible="true">                                    
                                        <Items>
                                            <ext:FieldSet runat="server" Title="Primary Withdrawal" DefaultAnchor="100%" Padding="10" LabelWidth="120">
                                                <Items>
                                                    <ext:DateField ID="WithdrawalStartDate" runat="server" FieldLabel="Start Date" AllowBlank="false" Disabled="true" />
                                                    <ext:SelectBox ID="WithdrawalFreq" runat="server" FieldLabel="Frequency" AllowBlank="false" Disabled="true">
                                                        <Store>
                                                            <ext:Store ID="WithdrawalFreqStore" runat="server">
                                                                <Reader>
                                                                    <ext:JsonReader IDProperty="value">
                                                                    </ext:JsonReader>
                                                                </Reader>
                                                                <Fields>
                                                                    <ext:ModelField Name="value" Type="Int" />
                                                                    <ext:ModelField Name="text" />
                                                                </Fields>
                                                            </ext:Store>
                                                        </Store>
                                                    </ext:SelectBox>
                                                    <ext:NumberField ID="WithdrawalAmount" runat="server" FieldLabel="Amount ($)" AllowBlank="false" Disabled="true" AllowDecimals="true" AllowNegative="false" MinValue="1" />
                                                    <ext:Checkbox ID="IncludeWithholdingPrimary" runat="server" FieldLabel="Include Withholding" />
                                                </Items>
                                            </ext:FieldSet>
                                        </Items>
                                    </ext:FormPanel>
    
    
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </items>
            </ext:Panel>
    <%--    </Items>
    </ext:Viewport>--%>
        
    </body>
    </html>
    Last edited by fabricio.murta; Mar 14, 2017 at 2:33 PM.
  2. #2
    Hello @rmelancon!

    Thanks for providing the simplified code sample!

    I don't see in your outer panel code any reference to width/height, nor any layout (like fitLayout) to the component surrounding it (your outer page's lines 23-39).

    I suggest you either assigning the outer window a FitLayout (or Region, anchor, etc), or giving the inner panel fitting width/height to fill the window contents.

    You can also, if that's the case, give the panel (pnlSettings) width and height in the click event but it won't make much sense if the panel is supposed to have fixed dimensions or a perfect-fit into the outer window.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I tried putting width, height, fitlayout on the window, on the panel, nothing seems to work. So try this:

       <ext:Window ID="winSettings" runat="server" Hidden="true">
            <Items>
                <ext:Panel ID="pnlSettings" runat="server" Title="Account Settings" 
                    width="500"
                    Height="500" 
                    Layout="FitLayout">
                    <Loader
                        runat="server"
                        Url="Settings.aspx"
                        Mode="Frame"
                        TriggerEvent="show"
                        ReloadOnEvent="true"
                        DisableCaching="true">
                        <LoadMask ShowMask="true" />
                    </Loader>
                </ext:Panel>
            </Items>
        </ext:Window>
    So when there are multiple "layers" where do I control the sizing/layout? For example, in this scenario I have an outer window "winSettings" that contains a Panel "pnlSettings" that contains a Loader that loads another Panel inside of them (in settings.aspx <Panel Title="Settings one">) So do I need layouts and sizes in all the "levels" or just the outermost? I am always just playing around with settings until I get it to work, but I'd like to understand what the proper "hierarchy" of the layout stuff is. Can you point me to a page that explains this?
    Thanks,
    Robb
  4. #4
    Hello @rmelancon!

    Your example does not run here, can you try to open the inner settings page individually and see if yours work at all? I'd say first step would be to make the inner page work spearately before even trying to make it show up inside another page's frame loader.

    Also, the outer page does not even show the loader's loading mask which seems you want to trigger during the "show" event of the panel. For a container to trigger the Show event it is necessary for it to be previously Hidden.

    And about your questioning, yes, all panels must have width and height defined either:
    - directly and statically via the Height and Width properties
    - indirectly by the surrounding container's layout (a viewport is also a container, as well as the Ext.Net.Container, Ext.Net.Panel, Ext.Net.TabPanel, Ext.Net.FieldSet and so on)
    - dynamically by server-side -- which makes a client-side call -- or client-side script setting the width and height settings, triggered by the relevant events (show, click).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    The settings page loads fine for me (I have to add a resource manager in order to load it by itself)
  6. #6
    The Hidden was the trick. I had the window hidden but not the panel inside the hidden window. Makes sense now that the Trigger event was never triggering. Thanks.
  7. #7
    Hello! Thanks for the feedback!

    The page will also need the resource manager if loading from inside the panel because it is inside an iframe, or an independent page. So you should define the resource manager on it. It wouldn't need the resource manager, for example, for MVC partial views or user controls -- which are code loaded in the current page and not iframe-linked content. An iframe works like a new browser tab, so the page's resources are all independent.

    Glad the "hidden" part helped figure out the problem! I believe you didn't get down to the missing resource manager problem on the test case cause the load event never triggered at all, right? The missing load mask was a good hint for me to notice it was not triggering at all. :)
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Yes, had it loaded, I would have immediately got the resource manager error. I just thought I wasn't seeing the mask because it loading too fast and I just couldn't see the panel because of a layout issue. Thanks again!

Similar Threads

  1. Panel Deferred loading
    By lavanya.influx@gmail.com in forum 2.x Help
    Replies: 0
    Last Post: Nov 15, 2012, 7:01 AM
  2. Deferred loading of Panel without iframe?
    By lionelhutz in forum 1.x Help
    Replies: 1
    Last Post: Oct 09, 2009, 9:39 AM
  3. Deferred loading of Panel
    By lionelhutz in forum 1.x Help
    Replies: 0
    Last Post: Oct 09, 2009, 8:40 AM
  4. [CLOSED] Panel deferred loading with grid in Merge mode
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 14, 2009, 1:38 PM
  5. [CLOSED] clearContent with panel deferred loading in merge mode
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 02, 2009, 11:31 AM

Posting Permissions