[CLOSED] Switching mode of Loader from Frame to Html and Vice Versa

**paulc** · May 18, 2012, 10:32 AM

I've been unable to switch a loader instance between modes without overriding Ext.net.ComponentLoader. Is this the correct way to override it and/or is this already supported functionality?

Ext.override(Ext.net.ComponentLoader,
{
    load: function (options) {
        if (Ext.isString(options)) {
            options = { url: options };
        }
        else {
            options = Ext.apply({}, options);
        }


        if (this.paramsFn) {
            this.params = this.paramsFn();
        }


        if (options.paramsFn) {
            options.params = Ext.apply(options.params || {}, options.paramsFn());
        }


        if (!Ext.isDefined(options.passParentSize) && this.passParentSize) {
            options.params = options.params || {};
            options.params.width = this.target.body.getWidth(true);
            options.params.height = this.target.body.getHeight(true);
        }


        if (options.renderer == "frame") {
            this.loadFrame(options);
            return;
        }
        
        if (!Ext.isEmpty(this.target.iframe)) {
            this.target.removeAll(true);
            this.target.iframe = null;
        }
   


        if (this.directMethod) {
            var me = this,
                mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
                params = Ext.apply({}, options.params),
                callback = options.callback || me.callback,
                scope = options.scope || me.scope || me,
                method,
                dmCfg;


            Ext.applyIf(params, me.params);
            Ext.apply(params, me.baseParams);


            Ext.apply(options, {
                scope: me,
                params: params,
                callback: me.onComplete
            });


            if (me.fireEvent('beforeload', me, options) === false) {
                return;
            }


            if (mask) {
                me.addMask(mask);
            }


            method = Ext.decode(this.directMethod);


            dmCfg = {
                complete: function(success, result, response) {
                    me.onComplete(options, success, { responseText: result });
                }
            };


            if (method.length > 1) {
                method(Ext.encode(options.params), dmCfg);
            }
            else {
                method(dmCfg);
            }


            me.active = {
                options: options,
                mask: mask,
                scope: scope,
                callback: callback,
                success: options.success || me.success,
                failure: options.failure || me.failure,
                renderer: options.renderer || me.renderer,
                scripts: Ext.isDefined(options.scripts) ? options.scripts : me.scripts
            };


            me.setOptions(me.active, options);


            return;
        }


        Ext.net.ComponentLoader.superclass.load.apply(this, arguments);
    }
});

Changes made are:

1. Remove the iframe if it already exists and the mode isn't Frame
2. Use config.renderer instead of this.renderer to register the change in config.

**Daniil** · May 18, 2012, 11:28 AM

Hi,

I would avoid overriding the ComponentLoader load method for now.

But we will review what changes we should do in the load method.

Example

<%@ 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 v2 Example</title>

    <script type="text/javascript">
        var load = function (panel, renderer, url) {
            if (renderer == "html") {
                panel.removeAll(true);
                panel.iframe.remove();
                delete panel.iframe;
            }

            panel.getLoader().renderer = renderer;a
            panel.load({
                url : url
            });
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Panel 
        ID="Panel1" 
        runat="server" 
        Height="400" 
        Width="400">
        <Loader runat="server" Url="TestFrame.aspx" Mode="Frame">
            <LoadMask ShowMask="true" />
        </Loader>
    </ext:Panel>

    <ext:Button runat="server" Text="Load with Html Mode">
        <Listeners>
            <Click Handler="load(App.Panel1, 'html', 'TestHtml.aspx');" />
        </Listeners>
    </ext:Button>

    <ext:Button runat="server" Text="Load with Frame Mode">
        <Listeners>
            <Click Handler="load(App.Panel1, 'frame', 'TestFrame.aspx');" />
        </Listeners>
    </ext:Button>
</body>
</html>

**paulc** · May 18, 2012, 11:50 AM

Thanks Daniil, that's a much better solution.

**Daniil** · May 18, 2012, 12:12 PM

But we will review what changes we should do in the load method.

Well, currently changing renderer in the case with "frame" is not supported. We will look into it in the future.

My solution

if (renderer == "html") {
    panel.removeAll(true);
    panel.iframe.remove();
    delete panel.iframe;
}

is partial for your particular case. It might stop working (though not 100%) if you will use other renderer types. Also using additional options like TriggerControl, TriggerEvent can cause issues as well.

The 100% solution can be re-rendering a container with a new Loader at all.

Another option could be a container with CardLayout with a separate container for each renderer types.

But I think it all doesn't look so good. The main problem we can see is a necessity to change renderers.

Could you clarify what is the scenario you will need to change renderers? Maybe, there is a better solution on the application design level.

**paulc** · May 18, 2012, 12:36 PM

Hi, yes I think I do need a new approach. The current situation is an application developed using a mixture of jquery/asp.net forms (legacy code) and new development done with Extjs4.1/Ext.Net.

The client request is to have a standard and animated main navigation bar at the top of the page.

The easiest way for me would be to reload the full page and render the navigation bar each time. I had this partially working but the animation was difficult to sync between page refreshes and also there was sometimes a delay where the you see a "white flash" whilst the browser is loading the script and before it renders the page which is unacceptable to the client.

Next step, I produced an index page with the navigation and load the content in an IFRAME. This works fine for the legacy pages, but for the Extjs based views we have a lot of popup dialogs/windows. As these windows are rendered in the frame they cannot be dragged or maximised to use the full screen area as they are clipped within the bounds of the frame.

Last attempt was to load the legacy pages in the frame which is acceptable and load the Extjs based pages use Html/Merge mode of the panel loader. This is now working but I have the memory leak issue.

**Daniil** · May 18, 2012, 1:41 PM

Originally Posted by paulc

Last attempt was to load the legacy pages in the frame which is acceptable and load the Extjs based pages use Html/Merge mode of the panel loader. This is now working but I have the memory leak issue.

Lets try to sort this issue out first. For someone who can be interested it is discussed here:
http://forums.ext.net/showthread.php...ll=1#post82183

Thread: [CLOSED] Switching mode of Loader from Frame to Html and Vice Versa

Thread Tools

Search Thread

Display

[CLOSED] Switching mode of Loader from Frame to Html and Vice Versa

Similar Threads

[CLOSED] Loader with Html renderer and Window rendering

[CLOSED] ext:Panel with Items and Loader (mixed mode)

Loader and Frame

[CLOSED] Validate form before switching tabs

[CLOSED] switching themes on controls

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Switching mode of Loader from Frame to Html and Vice Versa

[CLOSED] Switching mode of Loader from Frame to Html and Vice Versa

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us