Question

我正在尝试创建一个小型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') {
        //
    }
}
});

Answer 1

正如Perdro Reis建议的那样，解决方案是简单地使用iframe容器并加载其他应用程序的html文件。这不是最好的解决方案，因为我无法像预期的那样加载js文件。

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

1 个答案: