ExtJS load another app in panel

Question

I'm trying to create a small ExtJS app (main app) that displays other apps (secondary apps) in a panel. I can load the index file of the apps but the js scripts are not loaded. The secondary apps are already built. Does anyone know how I should properly load the secondary apps? Thank you

This is my main app's view:

Ext.define('POCs.view.Main', {
extend: 'Ext.container.Container',
requires: [
    'POCs.controller.MainController',
    //'POCs.view.MainModel'
],

xtype: 'app-main',

controller: 'main',
viewModel: {
    type: 'main'
},

layout: {
    type: 'border'
},

items: [{
    xtype: 'panel',
    region: 'west',

    items:[{
          xtype: 'button',
          width:200,
          fontWeight: "bold",
          itemId: 'err',
          margin:20,
          html: 'POC1',
          bodyPadding: 10,
          handler: 'onErrButton' 

    },
    {     width:200,
          xtype: 'button',
          fontWeight: 'bold',
          itemId: 'per',
          margin:20,
          html: 'POC2',
          bodyPadding: 10, 
          //handler: 'onPerButton' 
    }
    ],

    width: 250,
    split: true,

},{
    region: 'center',
    xtype: 'panel',
    id: 'canvas1',
    name: 'Canvas1'


},
{
    region: 'north',
    xtype: 'panel',
    split:true,
    items:[{
        region:'west',
        xtype:'image',
        src:'logo.jpg'
        },
        {
            region:'center',
            html: '<h2>Proofs of concept</h2>',
            margin:"0 0 0 50",


        }]
}]
});

And this is the controller:

Ext.define('POCs.controller.MainController', {
extend: 'Ext.app.ViewController',

requires: [
    'Ext.MessageBox'
],

alias: 'controller.main',

config: {
    refs: {
            canvas1: '#canvas1',
         }
},


init: function() {
   var me=this;

    me.control({
        '#per': {

                click: this.onPerButton,

                }   

    });
},
onErrButton: function () {
    Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onPerButton: function () {

    Ext.Ajax.request ({
        url: 'ap3init/index.html',
        scripts:true, 
        autoLoad:true,
        success: function(response) {
                 var htmlText= response.responseText;
                 var cp1 = Ext.getCmp('canvas1').setHtml(htmlText);
                  //setHtml only sets the html but doesn't activate the scripts

        }
    });

},
onSecButton: function () {
    Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onSpcnButton: function () {
    Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onSpcoButton: function () {
    Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},

onConfirm: function (choice) {
    if (choice === 'yes') {
        //
    }
}
});

You can do this using an iframe, and setting it's url to the index of your internal/secondary app. Look into this post - http://stackoverflow.com/questions/6025814/extjs-4-create-an-iframe-window | or maybe this component - http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.IFrame — Pedro Reis, Oct 21 '14 at 17:04
I used the Ext version of the iframe. The only problem with this approach is that you have to load a html file. I still couldn't load a script properly. You should post your comment as answer so I can accept it — Alex Lungu, Oct 26 '14 at 09:53

score 0 · Answer 1 · answered Oct 26 '14 at 09:55

0

As Perdro Reis suggested, the solution was to simply use an iframe container and just load the html file of the other app. It wasn't the best solution because I couldn't load a js file as it was intended.

answered Oct 26 '14 at 09:55

Alex Lungu

1,104
2
12
28

My suggestion allowed you to load the app in another panel, and you did mention you had the index filed to be used, I interpreted it as having the HTML files. I think was not mentioned that you could only load the js file. However, you could possibly set the HTML in your code and load the file there. I'll have to look into and possibly post later. – Pedro Reis Oct 26 '14 at 17:58

ExtJS load another app in panel

1 Answers1