ExtJS在面板中加载另一个应用程序

ExtJS load another app in panel

本文关键字:加载 另一个 应用程序 ExtJS      更新时间:2023-09-26

我正试图创建一个小型ExtJS应用程序(主应用程序),在面板中显示其他应用程序(辅助应用程序)。我可以加载应用程序的索引文件,但没有加载js脚本。辅助应用程序已生成。有人知道我应该如何正确加载辅助应用程序吗?谢谢

这是我的主要应用程序视图:

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",

        }]
}]
});

这就是控制器:

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') {
        //
    }
}
});

正如Perdro Reis所建议的,解决方案是简单地使用iframe容器,只加载另一个应用程序的html文件。这不是最好的解决方案,因为我无法按预期加载js文件。