[CLOSED] Update panel in 4.0

  1. #1

    [CLOSED] Update panel in 4.0

    In the process of migrate from coolite 0.7 to Ext.Net 4. We have the next code to update a panel in coolite.

    <ext:Panel 
        ID="PanelConta" 
        runat="server" 
        Border="true"
        AnchorVertical="100%" 
        AnchorHorizontal="100%"
        Layout="FormLayout" 
        Region="Center">
        <DirectEvents>
            <Update OnEvent="Panel_Update" />
        </DirectEvents>
    </ext:Panel>
    The Update command not exist in ext.net. What will be the way to do this?
    Last edited by fabricio.murta; Nov 22, 2018 at 6:41 PM.
  2. #2
    Hello @devSF!

    The way to update a panel dynamically has changed from the Update direct event to the ComponentLoader concept.

    Here's a matching example from v1 and v4. They don't actually work on the page because now both examples explorers are running on HTTPS protocol, while the content they link is under http://. This makes browsers (like Google's Chrome, at least) refuse to open the conent. But if you open the browser's development console, you'll see the events firing.

    - v1 example using the Update event logic
    - v4 example using an equivalent logic

    That would be a great opportunity for you to create a "playground project" to draw your code samples. Usually when having trouble building a page, it is very helpful for everyone to provide a simplified yet runnable test case to reproduce the issue.

    The only difference in the v1 example above from your case is that it relies on the update listener instead of update direct event. The missing part of the logic, which would be having server-side calls, would be now using a DirectMethod handler as in this example:
    - v4 example on using the ComponentLoader with a DirectMethod

    So, basically the way to update the panel has changed. I am not really sure on how your panel needed to be updated, but please browse these examples and see if they help.

    If that's still not clear for you how to make this work on v4, let us know, we'll see what else we can explore to clarify the issue.

    Regardless of that, I hope the tips above helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Updating panel not using buttom

    Hello Fabricio:

    Thank's for your answer. I review the examples but in that case are using a Click Event for a Buttom in the listener using the loader. Like the next code.

        <ext:Panel
            runat="server"
            Height="200"
            Width="500"
            Layout="FitLayout"
            Title="Load UserControl from the Page (static DirectMethod, manual loading)">
            <Loader
                runat="server"
                AutoLoad="false"
                DirectMethod="#{DirectMethods}.UserControl"
                Mode="Component">
                <LoadMask ShowMask="true" />
            </Loader>
            <Buttons>
                <ext:Button runat="server" Text="Load" Icon="PluginGo">
                    <Listeners>
                        <Click Handler="this.up('panel').load();this.disable();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>
    In my case i only need to update the panel without click a button.
    Do you have some example in this case?

    Thank´s you.
  4. #4
    Hello, @devSF!

    Isn't this just the case you enable AutoLoad? That is, set AutoLoad="True", your last code block line 9.

    Or do you have a different behavior you require?..

    By 'update', you probably want it to be polling the server from time to time?
    Fabrício Murta
    Developer & Support Expert
  5. #5

    Update panel

    Hello Fabricio:

    By 'update', you probably want it to be polling the server from time to time?
    That's right. That's the reason i don't need a buttom.
    Do you have some example in this case.

    Thank you.
  6. #6
    Hello again, @devSF!

    I could wrap up this simple example showing one of the possibilities in attaining this objective.

    This involves in 'deferring' a reload of the panel each time a success load happens.

    main page: 62492-panelAutoUpdate.aspx

    <%@ Page Language="vb" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Setting Html and Loader Properties - Ext.NET Examples</title>
    </head>
    <body>
        <h1>Setting Html and Loader Properties</h1>
    
        <ext:ResourceManager runat="server" />
    
        <h2>Loader with Html Mode</h2>
    
        <ext:Panel
            ID="Panel1"
            runat="server"
            Width="350"
            Height="200"
            Title="Merge Mode"
            BodyPadding="5">
            <Loader runat="server" Url="62492-time.aspx">
                <Listeners>
                    <Load Handler="Ext.defer(this.load, 1000, this);" />
                </Listeners>
                <LoadMask ShowMask="true" />
            </Loader>
        </ext:Panel>
    </body>
    </html>
    [b]"child" page:[b/] 62492-time.aspx

    <%@ Page Language="vb" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Current server time</title>
    </head>
    <body id="body" runat="server">
        Server time: <%= DateTime.Now.ToLocalTime %>
    </body>
    </html>
    As said above, this is one possible way into attaining this functionality. It has the advantage that it will only try a "reload" after a given time a successful load happens. The drawback is the "refresh" recurrence will stop the first time it fails.

    It relies on calling client-side's Ext.defer() method to, after the interval in milliseconds, trigger the load() method from the panel's loader component.

    The way it is set up in the code above, it triggers a defer()'d reload every time the loader's Load event listener triggers. To handle errors, you'd want the Exception listener.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7

    Thank's for the tip

    Thanks Fabricio:

    Your advice was nice. I get solution with this code:

    <Loader runat="server" >
        <Listeners>
            <Load Handler="Ext.defer(Panel_Update, 1000, this);" />
        </Listeners>
        <LoadMask ShowMask="true" />
    </Loader>
    Have a nice day
  8. #8
    Hello @devSF, and thanks for the feedback and for sharing the solution that worked for you!

    Assuming it now works for you, we'll be marking this thread as closed. This won't, though, prevent you from further posting here if you get more inquiries related to this issue in the future.

    Hope you have a smooth version transition!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] How to show mask on ajax update panel update
    By egvt in forum 1.x Premium Help
    Replies: 2
    Last Post: May 18, 2012, 10:36 PM
  2. Replies: 4
    Last Post: Apr 22, 2011, 10:30 PM
  3. [CLOSED] Update ASP Update Panel with Direct Event
    By sharif in forum 1.x Premium Help
    Replies: 3
    Last Post: Jun 24, 2010, 1:48 AM
  4. Update Panel from Tree Panel selection
    By Marius.Serban in forum 1.x Help
    Replies: 1
    Last Post: May 07, 2009, 7:36 AM
  5. Replies: 3
    Last Post: Sep 13, 2008, 11:09 AM

Posting Permissions