[CLOSED] renderer"frame" alternative in examples solution

[registrator]

I am basing my solution on your examples solution and the problem that is constantly appearing, and was addressed in my questions here and questions of other users, is that, as far as I understand, we have the following in the main.js:

var makeTab = function (id, url, title) {
    var win, 
        tab, 
        hostName, 
        exampleName, 
        node, 
        tabTip;
    
    if (id === "-") {
        id = Ext.id(undefined, "extnet");
        lookup[url] = id;
    }
    
    tabTip = url.replace(/^\//g, "");
    tabTip = tabTip.replace(/\/$/g, "");
    tabTip = tabTip.replace(/\//g, " > ");
    tabTip = tabTip.replace(/_/g, " ");
    
    hostName = window.location.protocol + "//" + window.location.host;
    exampleName = url;
    
    tab = App.ExampleTabs.add(new Ext.panel.Panel({
        id   : id,        
        tbar: [{ xtype: 'label', id: id + 'L', margins: '0 0 0 10', text: title },
        "->",          
        {
            text    : "Refresh",
            handler : function () {
                Ext.getCmp(id).reload(true)
            },
            iconCls : "#PageRefresh"
        }],
        title    : title,
        tabTip   : tabTip,
        hideMode : "offsets",        

        loader : {            
            renderer : "frame",
            url: hostName + url,

and the

renderer : "frame",

seems to be the problem all the time. Loading the view in a frame.
What other alternatives we have when it comes to this? I would like to understand why you guys chose to use this solution and if there are other ways what changes would they imply to your original solution when not using frames?

Thank you.

[fabricio.murta]

Hello @registrator!

I'm not sure where you based this example from. Could you point a link for it?..

Well, regardless of that, I believe you want to know what are the alternatives for the renderer option in the loader.

There are five options of loaders you can use:
- frame (as your code sample has)
- html
- script
- data
- component

The loader of a container may render an entire HTML page when you use its renderer as frame and provide an url for that page. You can also fill its HTML content by some constant text, dynamic, or run a script to define its contents.

This example illustrates the use of the html and frame modes: Setting Html and Loader Properties

This examples illustrates a situation when the renderer is script: Partial Items

This one shows a case when the renderer is data: Row Expander Plugin with server side data

Finally, this one uses the component loader mode to achieve its goal: Row Expander Plugin with GridPanel

Maybe this examples specially illustrates to you how you should deal while dynamically loading views: Row Expander Plugin with View. It uses the component approach.

I hope this gives you a good overview and in-depth of how each of the different options work. Let us know otherwise!

[registrator]

Hi Fabricio

Very exhaustive answer. I appreciate the effort. I will need to read through carefully. Although I have seen these examples at one point I am quite sure.
Actually, the script I am referring to is from the examples solution that contains all these MVC examples.
It refers to how each example tab is created and how the actual example view is loaded in the tab. You can find this script in the resources/js/main.js file in the solution.
Now, I am basing my solution on this examples solution because it solves a lot of bootstrapping issues for me but the "frame" loading type is not working for me and creates more and more problems that I am finding very difficult to solve. So I was wondering what my other options are in that sense, if there are any? I would like to keep things the same as much as possible as they are now but just load the views in the tabs in a different way.

Thank you.

[fabricio.murta]

Glad it helped, @registrator!

It is always good to know the alternatives and how they work so you can better use the framework.

Browsing sencha documentation and examples can also be very helpful. Keep an eye to the ExtJS version though: every Ext.NET version is bound to one and only one ExtJS version.

Currently, latest SVN Ext.NET version is based on ExtJS 5.1.0.
Current Ext.NET 2.x series on ExtJS 4.2.1.

And, just for the record, I believe you are talking about the script http://mvc.ext.net/resources/js/main.js included the MVC examples solution.